`
isiqi
  • 浏览: 15945988 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Html5 Canvas初探学习笔记(9) -渐变

 
阅读更多
小满(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创建线性渐变,四个参数分别为起点的横纵坐标和终点的横纵座标,然后为两个点加入色值,addColorStop0为起点,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);

起点和终点是正方形的中心,半径不同就可以造出这种效果。

如有错误,希望大家多多指正

下一篇继续研究绘制的高级功能


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics