canvas绘制渐变图形

1.绘制线性渐变

Canvas提供了用于创建线性渐变的函数createLinearGradient（x0,y0,x1,y1）,坐标点（x0,y0）是起点 ，（x1,y1）是终点 。

创建一个渐变色

var gradient=createLinearGradient(0,0,300,0);

定义渐变色颜色

ctx.addColorStop(stop,color);
ctx.addColorStop(0,"#f00");
ctx.addColorStop(1,"#00f");

设置Canvas内容的fillStyle为当前的渐变对象，并且绘制这个图形

ctx.fillStyle=gradient;         //设置fillStyle为当前的渐变对象
ctx.fillRect(0,0,400,300);      //绘制渐变图形

一个线性渐变的图形

效果：

微信图片_20200605110144.png

2.绘制径向渐变

创建一个沿两个圆之间的锥面绘制渐变

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

一个径向渐变的图形

效果：

微信图片_20200605110647.png