画布画头猪

<template>
  <div class="a">
    <canvas id="myCanvas"></canvas>
  </div>
</template>

<script>
import chat from "./chat.vue";
export default {
  components: { chat },
  name: "trainCity",
  data() {
    return {
      canvas: null,
      context: null,
    };
  },
  mounted() {
    this.doew();
  },
  methods: {
    doew() {
      this.canvas = document.getElementById("myCanvas"); //创建一个画布
      this.canvas.width = "800"; //注意：没有单位
      this.canvas.height = "800"; //注意：没有单位
      this.context = this.canvas.getContext("2d"); //canvas现在还是一个小孩子，不能支持3D
      //准备画个圆
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.arc(150, 75, 70, 0, 2 * Math.PI); //画弧的方法
      this.context.stroke(); //在页面是实际画的方式、
      //内左眼睛
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.arc(120, 55, 5, 0, 2 * Math.PI); //画弧的方法
      this.context.stroke(); //在页面是实际画的方式、
      //内右眼睛
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.arc(180, 55, 5, 0, 2 * Math.PI); //画弧的方法
      this.context.stroke(); //在页面是实际画的方式、
      //外左眼睛
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.arc(120, 55, 10, 0, 2 * Math.PI); //画弧的方法
      this.context.stroke(); //在页面是实际画的方式、
      //外右眼睛
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.arc(180, 55, 10, 0, 2 * Math.PI); //画弧的方法
      this.context.stroke(); //在页面是实际画的方式、
      //左耳朵
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.moveTo(120, 10);
      this.context.quadraticCurveTo(20, 0, 80, 80);
      this.context.stroke(); //在页面是实际画的方式、
      //右耳朵
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.moveTo(180, 10);
      this.context.quadraticCurveTo(280, 0, 220, 75);
      this.context.stroke(); //在页面是实际画的方式、
      //外鼻子
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.ellipse(150, 100, 45, 30, 0, 10, Math.PI, true);
      this.context.stroke();
      //左鼻空
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.ellipse(120, 100, 5, 10, 0, 10, Math.PI, true);
      this.context.stroke();
      //右鼻空
      this.context.beginPath(); //设置弧形，因为这里圆是属于弧形
      this.context.ellipse(180, 100, 5, 10, 0, 10, Math.PI, true);
      this.context.stroke();
    },
  },
};
</script>