Canves 矩形渐变绘制

最新推荐文章于 2023-04-23 11:06:51 发布

weixin_33739646

最新推荐文章于 2023-04-23 11:06:51 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/woddp/blog/2209267

本文详细介绍了如何使用HTML5的Canvas API进行各种渐变绘制，包括径向渐变、线性渐变以及如何结合这些技术创建丰富多彩的视觉效果。通过具体的代码示例，读者可以学习到如何在网页中实现复杂的图形设计。

为什么80%的码农都做不了架构师？>>>

<html>
    <head>
        <title>矩形</title>
    </head>
           <style>
            #canvas{
                background: #1977ca
            }
           </style>
     <body>
         <canvas id="canvas" width="850" height="800"></canvas>

         <script>
         var canvas=document.getElementById("canvas"),
         context=canvas.getContext('2d');
         context.save();
         context.font="24px 微软雅黑";
         context.fillStyle="#ffffff";
         
         context.fillText("矩形",170,40);
         context.lineWidth=30
         context.lineJoin="round";

         context.strokeStyle="goldenrod"
         context.fillStyle="#0000ff";
         context.strokeRect("10","80","180","180") //绘制矩形 无填充

         // 径向/圆渐变 创建渐变 
         /**
        x0	渐变的开始圆的 x 坐标
        y0	渐变的开始圆的 y 坐标
        r0	开始圆的半径
        x1	渐变的结束圆的 x 坐标
        y1	渐变的结束圆的 y 坐标
        r1	结束圆的半径
         */
         var grd=context.createRadialGradient(340,170,180,340,170,40)   
         grd.addColorStop(0,"rgb(64, 103, 236)");    //从外到里
        //  grd.addColorStop(0.5,"black");
         grd.addColorStop(1,"rgb(37, 236, 170)"); //从外到里
         
         context.fillStyle=grd;   
         context.fillRect(250,80,180,180); //绘制填充矩形

         var cycle={
              x:340,
              y:170,
              r:70, 
         }   
     
         context.lineWidth=1;
         context.beginPath();
         context.arc(cycle.x,cycle.y,cycle.r,0,Math.PI*2);
         context.stroke();


         //线性渐变   
    
         context.restore(); //重置样式
         context.fillStyle="red";
         /*
         x0	渐变开始点的 x 坐标
         y0	渐变开始点的 y 坐标
         x1	渐变结束点的 x 坐标
         y1	渐变结束点的 y 坐标
         */

         //从左到右
         var grd2=context.createLinearGradient(480,180,590,180)
         grd2.addColorStop(0,"red");
         grd2.addColorStop(1,"white");
         context.fillStyle=grd2;
         context.fillRect(480,80,180,180);
         
         //从上向下
         var grd3=context.createLinearGradient(10,300,10,440);   
         grd3.addColorStop(0,"red");
         grd3.addColorStop(1,"white");
         context.fillStyle=grd3;
         context.fillRect(10,300,150,150)

         context.restore();
         context.strokeStyle="#000000"
         context.fillStyle="#000000"

         //渐变辅助线 

         //渐变开始线
         context.beginPath();
         context.moveTo(10,310);
         context.lineTo(160,310);
         context.stroke();

         //渐变结束线
         context.beginPath();
         context.moveTo(10,440);
         context.lineTo(160,440);
         context.stroke();
         
         
        //  context.canvas.onmousedown=function(e){
        //     context.clearRect(0,0,canvas.width,canvas.height);
        //  }




         </script>
     </body>
 </html>

转载于:https://my.oschina.net/woddp/blog/2209267