通过Canvas绘制哆啦A梦

<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan

 * @Date: 2020-07-25 16:13:33
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-30 13:31:01
--> 
<template>
  <div>
    <div class="canvasBox">
      <canvas id="canvas" width="900" height="800" ref="canvas"></canvas>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      pen: ""
    }
  },
  mounted () {
    this.draw()
  },
  methods: {
    draw () {
      var can = document.getElementById("canvas");
      if (!can.getContext) return;
      this.pen = can.getContext("2d");
      //脑袋
      this.drawCircle(300, 180, 150, 0, 2, false, "rgb(80,170,230)");
      this.drawCircle(300, 250, 150, 1.25, 1.75, false, "white"); //上脸
      this.drawCircle(300, 170, 150, 0.25, 0.75, false, "white"); //下脸
      this.drawCircle(270, 210, 100, 0.75, 1.25, false, "white"); //左脸
      this.drawCircle(330, 210, 100, 1.75, 0.25, false, "white"); //右脸

      //中间
      this.pen.beginPath();
      this.pen.fillRect(198, 140, 204, 140);
      this.pen.closePath();

      //
      this.ellipseOne(this.pen, 260, 110, 40, 50);
      this.ellipseOne(this.pen, 340, 110, 40, 50);

      //眼珠
      this.drawCircle(270, 130, 15, 0, 2, false, "black");
      this.drawCircle(330, 130, 15, 0, 2, false, "black");
      //
      this.drawCircle(300, 165, 22, 0, 2, false, "red");
      //竖线
      this.beard(300, 190, 300, 280);
      //左胡子
      this.beard(200, 180, 270, 200); //1
      this.beard(200, 210, 270, 210); //2
      this.beard(200, 240, 270, 220); //3
      //右胡子
      this.beard(328, 200, 398, 180); //1
      this.beard(328, 210, 398, 210); //2
      this.beard(328, 220, 398, 240); //3
      //嘴巴
      this.pen.beginPath();
      this.pen.arc(300, 145, 150, 0.25 * Math.PI, 0.75 * Math.PI, false);
      this.pen.stroke();
      this.pen.closePath();


      //切棱角
      this.drawCircle(195, 320, 18, 0.7, 1.3, false, "red");
      this.drawCircle(405, 320, 18, 1.7, 0.3, false, "red");
      //脖子
      this.pen.beginPath();
      this.pen.fillRect(184, 305, 233, 30);
      this.pen.closePath();


      //身子
      this.pen.beginPath();
      this.pen.fillStyle = "rgb(80,170,230)";
      this.pen.fillRect(190, 335, 222, 180);
      this.pen.closePath();
      //胳膊
      this.arm(190, 335, 140, 395, 175, 425, 190, 405, "rgb(80,170,230)");
      this.arm(190, 405, 190, 514, 285, 514, 285, 514, "rgb(80,170,230)");
      this.arm(316, 514, 412, 514, 412, 405, 412, 405, "rgb(80,170,230)");
      this.drawCircle(145, 420, 30, 0, 2, false, "white");
      //右
      this.arm(412, 335, 462, 395, 427, 425, 412, 405, "rgb(80,170,230)");
      this.drawCircle(457, 420, 30, 0, 2, false, "white");
      //衣服
      this.drawCircle(300, 391, 80, 1.25, 1.75, true, "white");
      this.drawCircle(300, 391, 60, 0, 1, false, "white");
      //铃铛
      this.drawCircle(300, 345, 25, 0, 2, true, "yellow");
      this.drawCircle(300, 350, 8, 0, 2, true, "black"); //黑点
      this.beard(300, 350, 300, 370); //竖线
      this.beard(283, 327, 318, 327); //纹路
      this.beard(275, 338, 325, 338);
      //门
      this.drawCircle(300, 511, 16, 0.1, 0.9, true, "white");
      //脚
      this.pen.beginPath();


      this.pen.lineTo(165, 515);
      this.pen.lineTo(287, 515);
      this.pen.arc(284, 531, 15, 1.5 * Math.PI, 0.5 * Math.PI, false);
      this.pen.lineTo(287, 547);
      this.pen.lineTo(165, 547);
      this.pen.arc(165, 531, 15, 0.5 * Math.PI, 1.5 * Math.PI, false);
      this.pen.lineTo(165, 515);
      this.pen.closePath();
      this.pen.fillStyle = "white";
      this.pen.fill();
      this.pen.stroke();

      this.pen.beginPath();
      this.drawCircle(317, 531, 15, 0.5, 1.5, false, "white");
      this.drawCircle(436, 531, 15, 1.5, 0.5, false, "white");
      this.pen.beginPath();
      this.pen.moveTo(317, 515);
      this.pen.lineTo(436, 515);
      this.pen.stroke();

      this.pen.beginPath();
      this.pen.moveTo(317, 545);
      this.pen.lineTo(436, 545);
      this.pen.stroke();

    },
    //线 两点
    beard (sx, sy, ex, ey) {
      this.pen.beginPath();
      this.pen.lineTo(sx, sy);
      this.pen.lineTo(ex, ey);
      this.pen.stroke();
      this.pen.closePath();
    },
    drawCircle (center1, center2, radius, start, end, bol, color) {
      this.pen.beginPath();
      this.pen.arc(center1, center2, radius, start * Math.PI, end * Math.PI, bol);
      this.pen.fillStyle = color;
      this.pen.fill();
      // this.pen.closePath();
      this.pen.stroke();
    },
    ellipseOne (context, x, y, a, b) {
      //(圆心，圆心，宽，高)
      var step = a > b ? 1 / a : 1 / b;
      context.beginPath();
      context.moveTo(x + a, y);
      for (var i = 0; i < 2 * Math.PI; i += step) {
        context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
      }
      context.closePath();
      context.fill();
      context.stroke();
    },
    arm (a, b, c, d, e, f, g, h, color) {
      this.pen.beginPath();
      this.pen.lineTo(a, b);
      this.pen.lineTo(c, d);
      this.pen.lineTo(e, f);
      this.pen.lineTo(g, h);
      this.pen.stroke();
      this.pen.fillStyle = color;
      this.pen.fill();
      this.pen.closePath();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.canvasBox {
  width: 600px;
  height: 600px;
  margin: auto;
}
</style>