canvas图形绘制：矩形，路径

最新推荐文章于 2022-03-07 15:38:47 发布

汉武大帝·

最新推荐文章于 2022-03-07 15:38:47 发布

阅读量540

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/yinge0508/article/details/115325460

版权

canvas 专栏收录该内容

7 篇文章 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>

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();
    }
  }

效果：

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();
    }
  }

效果：

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();
    }
  }

绘制路径

 // 绘制路径
      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(); // 边框图形

使用全局透明度的例子：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();
      }

设置线条宽度

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

设置线条末端样式

// 默认值 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();
      }

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

// 设定线条与线条间接合处的样式。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();
      }

绘制虚线

var offset = 0;
      ctx.fillStyle = "skyblue";
      function drawLine() {
        ctx.clearRect(200, 300, 300, 200); // 清除区域
        ctx.setLineDash([8,10]); // setLineDash([a, b]) 来指定线段与间隙的交替  a:每一小段虚线的宽度 ; b: 间隙宽度；
        ctx.lineDashOffset = -offset; // 设置起始偏移量.
        ctx.strokeRect(230,330, 200, 100);
      }
      function timeOutDrawLine() {
        offset ++;
        if(offset > 20) {
          offset = 0;
        }
        drawLine();
        setTimeout(timeOutDrawLine, 15); // 注释掉这一行；虚线是静态的；打开时动态的；
      }
      timeOutDrawLine();

渐变色：线性渐变

// 渐变 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);

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);