canvas图形绘制：矩形，路径

布满荆棘的人生 2022-11-14 15:58 285阅读 0赞

1，canvas绘制矩形：实心矩形，边框矩形 ，擦除矩形

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>canvas绘制形状</title>
      <style type="text/css">
        #cv{
         border: 1px solid black;
        }
      </style>
    </head>
    <body>
      <canvas id="cv" width="300" height="200"></canvas>
    </body>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById("cv");
        if(canvas.getContext){
          var ctx = canvas.getContext("2d");
          // 图形绘制：矩形，路径
            //矩形： 绘制矩形的三种方法；
            ctx.fillRect(20,20,50,60); // fillRect(x,y,width,height) 绘制一个填充的矩形，x、y:矩形左上角顶点x、y轴坐标；width、height: 矩形宽度、高度；
    
            ctx.strokeRect(80,80,40,60);// fillRect(x,y,width,height) 绘制一个矩形的边框，x、y:矩形左上角顶点x、y轴坐标；width、height: 矩形宽度、高度；
    
            ctx.clearRect(30,30,20,20); // fillRect(x,y,width,height) 清楚一个矩形区域，x、y:矩形左上角顶点x、y轴坐标；width、height: 矩形宽度、高度；
          }
      }
      draw();
    </script>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70][]

2，绘制三角形：draw方法变成下面这样：

function draw(){
        var canvas = document.getElementById("cv");
        if(canvas.getContext){
          var ctx = canvas.getContext("2d");
          // 通过路径绘制
            // beginPath() 新建一条路径；closePath() 闭合路径； 
            // stroke() 通过线条来绘制图形轮廓；fill() 通过填充内容区域来生成实心图形
            ctx.beginPath();
            ctx.moveTo(60,80);
            ctx.lineTo(50,60);
            ctx.lineTo(40,100);
            ctx.closePath();  
            ctx.stroke();
        }
      }

效果：![20210330145355851.png][]

3，绘制圆弧：draw方法变成这样：

function draw(){
        var canvas = document.getElementById("cv");
        if(canvas.getContext){
          var ctx = canvas.getContext("2d");
          // 路径 
            ctx.beginPath(); 
     // arc(x, y, radius, startAngle, endAngle, anticlockwise) 绘制圆弧 
     // x, y, 圆心坐标； radius 半径, startAngle, endAngle, 圆弧开始结束弧度，单位是弧度， 弧度=(Math.PI/180)*角度
            // anticlockwise 绘制方向，默认为顺时针 boolean类型
            var start = (Math.PI/180)*0;
            var end = (Math.PI/180)*210;
            ctx.arc(50,50,30,start,end,false);
            ctx.stroke();
        }
      }

效果：![20210330150001857.png][]

4，二次贝塞尔曲线：

function draw(){
        var canvas = document.getElementById("cv");
        if(canvas.getContext){
          var ctx = canvas.getContext("2d");
          // 路径 
            ctx.beginPath(); 
            // 二次贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y) : cp1x,cp1y, 一个控制点；x,y 结束点
            ctx.moveTo(75, 25);
            ctx.quadraticCurveTo(25, 25, 25, 62.5);
            ctx.quadraticCurveTo(25, 100, 50, 100);
            ctx.quadraticCurveTo(50, 120, 30, 125);
            ctx.quadraticCurveTo(60, 120, 65, 100);
            ctx.quadraticCurveTo(125, 100, 125, 62.5);
            ctx.quadraticCurveTo(125, 25, 75, 25);
            ctx.stroke();
        }
      }

![20210330154056851.png][]

** 绘制路径**

// 绘制路径
          ctx.beginPath();
          ctx.fillStyle = "rgba(200,0,300,0.5)"; // 设置填充色
          ctx.moveTo(300, 80); // lineTo(x, y)
          ctx.lineTo(200, 150); // lineTo(x, y)
          ctx.lineTo(150, 100);
          ctx.lineTo(300, 80);
          ctx.closePath();
          ctx.fill(); // 填充图形
          // ctx.stroke(); // 边框图形

![20210816100609429.png][]

###  使用全局透明度的例子：globalAlpha ###

// 画背景图
          ctx.fillStyle = "#F9F205";
          ctx.fillRect(50,600,100,100);
          ctx.fillStyle = "#18F306";
          ctx.fillRect(150,600,100,100);
          ctx.fillStyle = "#05D6F9";
          ctx.fillRect(50,700,100,100);
          ctx.fillStyle = "#F90526";
          ctx.fillRect(150,700,100,100);
          // 设置全局透明度 globalAlpha
          ctx.globalAlpha = 0.2;
          ctx.fillStyle = "rgba(255,255,255)";
          for(var i = 0; i < 10; i ++) {
            ctx.beginPath();
            ctx.arc(150, 700, i * 10, 0, Math.PI * 2, false);
            ctx.fill();
          }

![20210816100800480.png][]

### ** 设置线条宽度** ###

ctx.lineWidth = 10; // 设置线条宽度；
          ctx.strokeStyle = "#05D6F9";
          ctx.strokeRect(320,600,200,100); // 绘制线框

![20210816101140402.png][]

** 设置线条末端样式**

// 默认值 butt ， 和导航线是完全平齐的。
          //  第二条线段使用了 round 选项，在线段末端增加了一个半径为线短宽度一半的半圆。
          // 右侧的线段使用了 square 选项，增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域
          let lineCap = ["butt", "round", "square"];
          for(var i = 0; i < 3; i ++) {
            ctx.lineCap = lineCap[i]; // 设置线条末端样式
            ctx.beginPath();
            ctx.moveTo(600, 200 + i * 25);
            ctx.lineTo(900, 200 + i * 25);
            ctx.stroke();
          }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 1][]

###  定线条与线条间接合处的样式 ###

// 设定线条与线条间接合处的样式。lineJoin: "bevel", "round", "miter" : 直角，圆角，菱角
          let lineJoin = ["bevel", "round", "miter"];
          for(var i = 0; i < 3; i ++) {
            ctx.lineJoin = lineJoin[i]; // 设置线条末端样式
            ctx.beginPath();
            ctx.moveTo(700, 300 + i * 45);
            ctx.lineTo(800, 370 + i * 45);
            ctx.lineTo(900, 300 + i * 45);
            ctx.stroke();
          }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 2][]

### ** 绘制虚线** ###

![20210816102000253.png][]![20210816102329655.gif][]

### **渐变色 ：线性渐变** ###

// 渐变 Gradients
          // createLinearGradient(x1, y1, x2, y2) 线性渐变； 接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)
          // createRadialGradient 径向渐变； 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，
          //    后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
          // gradient.addColorStop(position, color) position 
              // 参数position必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。color 是一个有效的 CSS 颜色值
          // strokeStyle 和 fillStyle 属性都可以接受 canvasGradient 对象。
    let lineGradient = ctx.createLinearGradient(0,0,0,150);
          lineGradient.addColorStop(0, '#00ABEB');
          lineGradient.addColorStop(0.5, '#fff');
          lineGradient.addColorStop(1, '#abccff');
          
          ctx.fillStyle = lineGradient;
          ctx.fillRect(500,0,100,150);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 3][]

createLinearGradient 中四个参数表示两个点是（0,0）和 （0,150）

// 径向渐变
          let radialGradient = ctx.createRadialGradient(0,150,150,0,350,150);
          radialGradient.addColorStop(0,"#00C9FF");
          radialGradient.addColorStop(0.5,"#C9FF");
          radialGradient.addColorStop(1,"#9FF");
    
          ctx.fillStyle = radialGradient;
          ctx.fillRect(0,150,200,200);

![20210816143626883.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70]: /images/20221022/199c748638c243e58add937ea2c304ea.png
[20210330145355851.png]: /images/20221022/1758ef8fd44c492690a1983308a1d261.png
[20210330150001857.png]: /images/20221022/7565960975f24ddebd7912a524a849c7.png
[20210330154056851.png]: /images/20221022/ed39362656f84244837ca5b27b6540c4.png
[20210816100609429.png]: https://img-blog.csdnimg.cn/20210816100609429.png
[20210816100800480.png]: https://img-blog.csdnimg.cn/20210816100800480.png
[20210816101140402.png]: https://img-blog.csdnimg.cn/20210816101140402.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210816101537432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210816101829648.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA==,size_16,color_FFFFFF,t_70
[20210816102000253.png]: https://img-blog.csdnimg.cn/20210816102000253.png
[20210816102329655.gif]: https://img-blog.csdnimg.cn/20210816102329655.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210816135756639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA==,size_16,color_FFFFFF,t_70
[20210816143626883.png]: https://img-blog.csdnimg.cn/20210816143626883.png