Canvas 学习2 (矩形,虚线矩形,圆角矩形)

1.Canvas画矩形

     /** @type {HTMLCanvasElement} */
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d"); //获得画笔
      /*
        1.描边矩形：strokeRect
        2.填充矩形：fillRect
        绘制矩形需要一个起始点
        四个参数：sx,sy,width,height
        sx:开始点的X坐标
        sy:开始点的Y坐标
        宽度
        height:高度
      */
      //第一个描边矩形：
      ctx.strokeRect(0, 0, 100, 100);
      //第一个填充矩形
      ctx.fillRect(100, 100, 100, 100);
      ctx.strokeRect(200, 200, 100, 100);
      ctx.fillRect(300, 300, 100, 100);
      ctx.strokeRect(400, 400, 100, 100);
      ctx.strokeRect(400, 200, 100, 100);
      ctx.fillRect(500, 100, 100, 100);

效果图：

 2.虚线矩形

canvas没有提供绘制虚线的api，我们可以通过moveTo，和lineTo来实现绘制虚线的需求。
思路是将一整条虚线分成若干个小线段，遍历这些小线段，单数线段通过lineTo绘制，双数线段使用moveTo跳过

代码，画线：

   drawDashLine([x1, y1], [x2, y2], step = 5) {
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d"); //获得画笔
      const x = x2 - x1,
        y = y2 - y1,
        count = Math.floor(Math.sqrt(x * x + y * y) / step),
        xv = x / count,
        yv = y / count;
      ctx.beginPath();
      for (let i = 0; i < count; i++) {
        if (i % 2 === 0) {
          ctx.moveTo(x1, y1);
        } else {
          ctx.lineTo(x1, y1);
        }
        x1 += xv;
        y1 += yv;
      }
      ctx.lineTo(x2, y2);
    },

实现矩形：

    drawDashRect(left, top, width, height, step = 5) {
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d"); //获得画笔
      this.drawDashLine([left, top], [left + width, top], step);
      ctx.stroke();
      this.drawDashLine(
        [left + width, top],
        [left + width, top + height],
        step
      );
      ctx.stroke();
      this.drawDashLine(
        [left + width, top + height],
        [left, top + height],
        step
      );
      ctx.stroke();
      this.drawDashLine([left, top + height], [left, top], step);
      ctx.stroke();
    },

调用：

this.drawDashRect(100, 100, 220, 220);

设置描边色：

ctx.strokeStyle = 'blue'; //设置描边色
ctx.lineWidth = 6;//描边线宽度设置

效果如图：

 3.圆角矩形

    draw() {
      /** @type {HTMLCanvasElement} */
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d");
      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;
      this.strokeRoundRect(ctx, 10, 10, 100, 100, 10);
      this.fillRoundRect(ctx, 200, 10, 100, 100, 10, "rgba(0,0,0,0.7)");
      // this.bar(250, 150, 100, Math.PI * 2, false, "#222", "blue");
      // this.drawDashRect(100, 100, 220, 220);
    },

    drawDashLine([x1, y1], [x2, y2], step = 5) {
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d"); //获得画笔
      const x = x2 - x1,
        y = y2 - y1,
        count = Math.floor(Math.sqrt(x * x + y * y) / step),
        xv = x / count,
        yv = y / count;
      ctx.beginPath();
      for (let i = 0; i < count; i++) {
        if (i % 2 === 0) {
          ctx.moveTo(x1, y1);
        } else {
          ctx.lineTo(x1, y1);
        }
        x1 += xv;
        y1 += yv;
      }
      ctx.lineTo(x2, y2);
    },
    drawDashRect(left, top, width, height, step = 5) {
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d"); //获得画笔
      this.drawDashLine([left, top], [left + width, top], step);
      ctx.stroke();
      this.drawDashLine(
        [left + width, top],
        [left + width, top + height],
        step
      );
      ctx.stroke();
      this.drawDashLine(
        [left + width, top + height],
        [left, top + height],
        step
      );
      ctx.stroke();
      this.drawDashLine([left, top + height], [left, top], step);
      ctx.stroke();
    },

    /**该方法用来绘制一个有填充色的圆角矩形
     *@param cxt:canvas的上下文环境
     *@param x:左上角x轴坐标
     *@param y:左上角y轴坐标
     *@param 矩形的宽度
     *@param height:矩形的高度
     *@param radius:圆的半径
     *@param fillColor:填充颜色
     **/
    fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d"); //获得画笔
      //圆的直径必然要小于矩形的宽高
      if (2 * radius > width || 2 * radius > height) {
        return false;
      }

      cxt.save();
      cxt.translate(x, y);
      //绘制圆角矩形的各个边
      this.drawRoundRectPath(cxt, width, height, radius);
      cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值
      cxt.fill();
      cxt.restore();
    },

    /**该方法用来绘制圆角矩形
     *@param cxt:canvas的上下文环境
     *@param x:左上角x轴坐标
     *@param y:左上角y轴坐标
     *@param 矩形的宽度
     *@param height:矩形的高度
     *@param radius:圆的半径
     *@param lineWidth:线条粗细
     *@param strokeColor:线条颜色
     **/
    strokeRoundRect(
      cxt,
      x,
      y,
      width,
      height,
      radius,
      /*optional*/ lineWidth,
      /*optional*/ strokeColor
    ) {
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d"); //获得画笔
      //圆的直径必然要小于矩形的宽高
      if (2 * radius > width || 2 * radius > height) {
        return false;
      }

      cxt.save();
      cxt.translate(x, y);
      //绘制圆角矩形的各个边
      this.drawRoundRectPath(cxt, width, height, radius);
      cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2
      cxt.strokeStyle = strokeColor || "#000";
      cxt.stroke();
      cxt.restore();
    },
    drawRoundRectPath(cxt, width, height, radius) {
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d"); //获得画笔
      cxt.beginPath(0);
      //从右下角顺时针绘制，弧度从0到1/2PI
      cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

      //矩形下边线
      cxt.lineTo(radius, height);

      //左下角圆弧，弧度从1/2PI到PI
      cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

      //矩形左边线
      cxt.lineTo(0, radius);

      //左上角圆弧，弧度从PI到3/2PI
      cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

      //上边线
      cxt.lineTo(width - radius, 0);

      //右上角圆弧
      cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

      //右边线
      cxt.lineTo(width, height - radius);
      cxt.closePath();
    },

效果图：

 难搞哦