HTML中canvas线性渐变的使用方法:

canvas渐变分为两种 ,下面进行对线性渐变的讲解:

.线性渐变;

用法:

createLinearGradient(x1,y1,x2,y2)

添加颜色:

grad.addColorStop(位置,颜色) 位置表示颜色的停止位置

注意:

在添加颜色得时候,“位置”,由0-1之间得数字填写,"颜色"需要用双引号或者单引号包裹起来作为一个字符串使用;

参数值:

    x1:起点的 横坐标X1。

y1:起点的 纵坐标Y1。

x2:终点的 横坐标X2。

y2:终点的 纵坐标Y2。

注意:x1,y1组合来使用表示起点位置的坐标;

    x2,y2组合来使用表示终点位置的坐标;

代码使用如下图所示:

实现效果如下图所示:

   感谢您一直以来得信任与关注!本著作为原创,版权所有翻版必究,本人唯一csdn id:m0_46532221