H5学习之8 canvas的运用3 填充线性渐变颜色

最新推荐文章于 2024-08-14 00:51:11 发布

原创最新推荐文章于 2024-08-14 00:51:11 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas

h5 专栏收录该内容

33 篇文章

订阅专栏

本文探讨了HTML5的canvas元素如何实现线性渐变颜色的填充，通过创建画板和定义绘制函数，详细阐述了渐变效果的设置和应用过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;">
    创建canvas画板，设置ID等属性
</canvas>

<script>
    var c=document.getElementById("myCanvas");/*获取创建的ID为myCanvas的画板*/
    var cxt= c.getContext("2d");/*创建在这个画板上的画笔*/
    var grd=cxt.createLinearGradient(0,0,100,0); /*创建线性渐变颜色*/
   /* cxt.createLinearGradient(x,y,a,b); 其中x y是起始点的坐标，a b是结束点的坐标。
   * 也就是跟PS填充线性颜色的那条线是一样的，创建一条线，有两个坐标，确定长度与方向。
   * 然后在下边的grd.addColorStop（）里设定百分比以及颜色。
   * 比如，线的起始点是（0，0）. 结束点是（100，0）。这条线段是100像素长度的笔直指向右边的线，他会在坐标 0-100之间进行向右的线性填充
   * 如果线是一条斜线，那么线性颜色的方向也就是斜的，跟PS里一样
   * */
    grd.addColorStop(0,"black");/*设定线的起始颜色*/
    grd.addColorStop(1,"white");/*设定线的结束颜色*/
    cxt.fillStyle=grd;/*填充颜色*/
    cxt.fillRect(0,0,175,50);/*画矩形*/
</script>
</body>
</html>

具体效果如下：

思路解释如下：

仍然是一个canvas标签画板，创建在body标签里

<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;">
   <!-- 创建canvas画板，设置ID等属性-->
</canvas>

然后是绘制函数，script标签里，sc标签放在body标签里

<script>
    var c=document.getElementById("myCanvas");/*获取创建的ID为myCanvas的画板*/
    var cxt= c.getContext("2d");/*创建在这个画板上的画笔*/
    var grd=cxt.createLinearGradient(0,0,100,0); /*创建线性渐变颜色*/
   /* cxt.createLinearGradient(x,y,a,b); 其中x y是起始点的坐标，a b是结束点的坐标。
   * 也就是跟PS填充线性颜色的那条线是一样的，创建一条线，有两个坐标，确定长度与方向。
   * 然后在下边的grd.addColorStop（）里设定百分比以及颜色。
   * 比如，线的起始点是（0，0）. 结束点是（100，0）。这条线段是100像素长度的笔直指向右边的线，他会在坐标 0-100之间进行向右的线性填充
   * 如果线是一条斜线，那么线性颜色的方向也就是斜的，跟PS里一样
   * */
    grd.addColorStop(0,"black");/*设定线的起始颜色*/
    grd.addColorStop(1,"white");/*设定线的结束颜色*/
    cxt.fillStyle=grd;/*填充颜色*/
    cxt.fillRect(0,0,175,50);/*画矩形*/
</script>