canvas中如何设置渐变色

第一种：线性渐变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)