HTML Canvas实现线性渐变效果

可以先使用HTML Canvas的线性渐变的函数createLinearGradient()来创建一个渐变色线性对象；然后使用addColorStop()方法定义渐变色颜色；最后将渐变颜色分配给strokeStyle或fillStyle属性进行填充，使用fillRect()等方法来绘制“已填色”的形状，如矩形，圆形，线条，文本等。

createLinearGradient() 方法创建线性的渐变对象，渐变可用于填充矩形，圆形，线条，文本等不同的颜色。

JavaScript语法：

context.createLinearGradient(x0,y0,x1,y1);

参数值：

●　x0：渐变开始点的 x 坐标

●　y0：渐变开始点的 y 坐标

●　x1：渐变结束点的 x 坐标

●　y1：渐变结束点的 y 坐标

addColorStop()方法规定渐变对象中的颜色和位置。

JavaScript 语法：

gradient.addColorStop(stop,color);

参数值：

●　stop：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

●　color：在结束位置显示的CSS颜色值

示例1：

线性渐变效果

效果图：

示例2：

线性渐变效果

效果图：

以上就是本篇文章的详细内容，更多请关注php中文网其它相关文章！