首页 > 代码库 > canvas入门-3渐变方法

canvas入门-3渐变方法

2024-07-13 11:41:39   219人阅读

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>

　　


联系
我们