小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man
本篇继续介绍html5的绘制效果,和之前介绍的不同,本篇介绍的渐变并不是一个状态值,他是之前介绍的fillStyle的一个值。首先来看一个例子:
代码如下:
vargradient=context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle=gradient;
context.fillRect(50,50,100,100);
这是一个线性渐变,首先通过createLinearGradient创建线性渐变,四个参数分别为起点的横纵坐标和终点的横纵座标,然后为两个点加入色值,addColorStop的0为起点,1为终点,第二个参数是颜色,可以是rgb也可以是rgba。
前一个是线性渐变,还有弧形渐变,效果如下:
代码如下:
vargradient=context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle=gradient;
context.fillRect(50,50,100,100);
createRadialGradient前三个参数为起点圆的圆心横纵坐标,圆半径。后三个参数如下是终点圆圆心坐标和圆的半径。
使用圆形渐变可以绘制出中心开始的渐变,效果如下:
代码如下:
vargradient=context.createRadialGradient(100,100,0,100,100,72);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle=gradient;
context.fillRect(50,50,100,100);
起点和终点是正方形的中心,半径不同就可以造出这种效果。
如有错误,希望大家多多指正
下一篇继续研究绘制的高级功能
分享到:
相关推荐
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
html5-canvas-border-pixel-progressbar源码
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
html5-canvas-3d-earth-rotate.zip
html5-canvas-3d-line-avatar.zip
html5-canvas-520-love-cartoon-codes(jb51.net).rar
html2canvas-1.0.0-rc.4版本
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
javascrip canvas画布,实现动态背景。
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
canvas-js-动画-例子
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
判断浏览器是否支持canvas,具体代码如下: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
通过HTML5+Canvas开发详解(第2版),你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画,而这些是开发交互式Web游戏的必备知识。 本书针对Canvas和HTML5技术的最新变动进行了更新,其中包含了大量清晰...
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
今天我们要给大家分享一款基于HTML5的3D粒子动画,该动画主要在Canvas画布上绘制粒子形的文字和3D模型,并且实现2D粒子文字与3D粒子模型之间的转换动画。在转换过程中,粒子从被打散到重新组合,动画效果非常炫酷,...
具有Discord表情符号支持的node-canvas-with-twemoji的分支。 这是一个能够在节点画布上绘制表情符号的模块。 安装 $ npm install node-canvas-with-twemoji-and-discord-emoji 快速范例 const { createCanvas } = ...