HTML Canvas实现径向渐变效果

可以先使用HTML Canvas的径向渐变的函数createRadialGradient()来创建一个放射状/圆形渐变对象；然后使用addColorStop()方法定义渐变颜色；最后使用fillStyle属性填充渐变颜色，使用fillRect()等方法来绘制“已填色”的形状，如矩形，圆形，线条，文本等。

实现径向渐变效果所要的方法有：

createLinearGradient()方法创建放射状/圆形渐变对象；渐变可用于填充矩形、圆形、线条、文本等等。

JavaScript 语法：

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

参数值：

●　x0：定义渐变的开始圆的 x 坐标

●　y0：定义渐变的开始圆的 y 坐标

●　r0 ：定义开始圆的半径

●　x1：定义渐变的结束圆的 x 坐标

●　y1：定义渐变的结束圆的 y 坐标

●　r1：定义结束圆的半径

addColorStop()方法规定渐变对象中的颜色和位置。可以使用addColorStop()方法规定不同的颜色，以及在渐变对象中的何处定位颜色。

fillStyle属性设置或返回用于填充绘画的颜色、渐变或模式。

fillRect()方法绘制“已填色”的矩形。默认的填充颜色是黑色。

示例1：

效果图：

示例2：绘制具有径向渐变的球

线性渐变效果

效果图：

示例3：使用渐变色绘制环

效果图：

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