canvas入门-3渐变方法

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

createLineGradient()

createRadialGradient()

addColorStop(var1,var2);

var1 取值在0-1之间

var2 是颜色值

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

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

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

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

1：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

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>