码迷,mamicode.com
首页 > 其他好文 > 详细

canvas入门-3渐变方法

时间:2014-07-22 22:56:32      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   

1、canvas中渐变方式有2种:线性渐变和径向梯度渐变

createLineGradient()

createRadialGradient()

addColorStop(var1,var2);

var1 取值在0-1之间

var2 是颜色值

前面有讲述线性渐变的作用,渐变是一个渐变对象

径向渐变方法createRadialGradient创建放射状/圆形渐变对象

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

渐变可用于填充矩形、圆形、线条、文本等等。

1:请使用该对象作为 strokeStylefillStyle 属性的值。

2:请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色

参数值:

参数描述
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径
<script type="text/javascript">
			var oCanvas = document.getElementById(‘canvas-1‘);
			var context = oCanvas.getContext(‘2d‘);//指向2d渲染环境的引用
			context.font = "30px Arial";
			var gradient=context.createRadialGradient(200,200,10,200,200,100);
			gradient.addColorStop("0","red");
			gradient.addColorStop("1.0","white");
			context.fillStyle = gradient;
			context.fillRect(0,0,400,400)
</script> 

  bubuko.com,布布扣

canvas入门-3渐变方法,布布扣,bubuko.com

canvas入门-3渐变方法

标签:style   blog   http   java   color   使用   

原文地址:http://www.cnblogs.com/knightshibiao/p/3861130.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!