canvas 颜色渐变

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

原创最新推荐文章于 2024-01-13 00:00:00 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#createLinearGradient #addColorStop

html+css+js 专栏收录该内容

24 篇文章

订阅专栏

部分语法：createLinearGradient(0,0,250,150)代表其实坐标（0,0）代表终点坐标（250,150）

addColorStop(0.5,"green");代表0.5处渐变，颜色为green

<html>
    
    <head>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <style type="text/css">
    
        </style>
        <script type="text/javascript">
         function draw(){
             var canvas =document.getElementById('myCanvas');
          
             var ctx=canvas.getContext('2d');
             var lingrad =ctx.createLinearGradient(0,0,250,150);
             lingrad.addColorStop(0,"blue");
             lingrad.addColorStop(0.5,"green");
             lingrad.addColorStop(1,"yellow");
             
             ctx.fillStyle=lingrad;
             ctx.fillRect(10,10,130,130);
         } 
         </script>
        <script type="text/css">
           canvas{border:1px solid black;}
        </script>>
    </head> <body >
        <input type="button" value="渐变" onclick="draw();">
        <p>
        <canvas id="myCanvas" width="150" height="150" ></canvas>
       
    </body>
   
</html>