CanvasGradient在canvas中是专门设置颜色渐变的一个类。它分为两种，一种是createLinearGradient()，即线性渐变；另一种是createRadialGradient()，即径向渐变；在设置之前，需要了解它们的使用方法：CanvasGradient.addColorStop(offset(0-1),color),offset是偏移值，它的值在0-1之间，color是要渐变的颜色。下来分别看这两种渐变的设置方法。
<body>
<canvas id="box" width="800px" height="400px"></canvas>
</body> 第一种：线性渐变createLinearGradient(X1,Y1,X2,Y2),它需要传递4个参数，X1,Y1分别代表起始点的坐标，X2,Y2分别代表结束点的坐标，返回值是一个CanvasGradient类型的对象。 具体示例代码如下：
var canvasEle=document.querySelector("#box")
var context=canvasEle.getContext("2d")
//创建线性渐变的方法->CanvasGradient类型的对象
var linearGradient= context.createLinearGradient(0,0,100,100);
linearGradient.addColorStop(0,"skyblue")
linearGradient.addColorStop(1,"darkturquoise")
//添加渐变颜色
context.fillStyle=linearGradient;
context.fillRect(0,0,100,100) 第二种：径向渐变createRadialGradient(X1,Y1,Z1,X2,Y2,Z2)需要传递的参数有6个，X1,Y1,Z1分别代表起始圆的圆心和半径，X2,Y2,Z2分别代表结束圆的圆心和半径。具体示例如下：
var canvasEle=document.querySelector("#box")
var context=canvasEle.getContext("2d")
var radialGradient=context.createRadialGradient(350,50,100,350,50,0)
radialGradient.addColorStop(0,"red");
radialGradient.addColorStop(1,"white");
context.fillStyle=radialGradient;
context.fillRect(300,0,100,100)
1065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
