html5中的canvas线性渐变

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

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

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas

html 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API实现线性渐变填充效果。通过创建线性渐变对象，并设置不同颜色的偏移量，最终绘制出带有渐变效果的矩形。文章包含完整的示例代码。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>canvas线性渐变</title>
   </head>
   <body>
       <canvas id="myCanvas" width="700" height="500"></canvas>

       

        <script type="text/javascript">
           var canvas=document.getElementById("myCanvas");
           var context=canvas.getContext("2d");

           var g1=context.createLinearGradient(0,0,300,300);

           g1.addColorStop(0.13,"rgb(255,255,0)");
           g1.addColorStop(0.5,"rgb(0,255,0)");
           g1.addColorStop(0.7,"rgb(0,0,255)");
           context.fillStyle=g1;
           context.fillRect(0,0,400,300);

           //事实证明边框渐变是不行的
           context.strokeStyle=g1;
           context.strokeRect(400,300,200,200);
        </script>
   </body>
</html>