canvas實現的畫板功能

閒來無事正好團隊準備做一個畫板相關的項目，雖然我不在其中但是對這個畫板還是蠻有興趣的。
主要是通過canvas這個標籤加上鼠標的一些相關事件來實現的。
中間有碰到過一個bug
canvas的畫板大小不能通過css來設置，css會縮放大小導致獲取到的點座標是正確的但是在canvas上顯示的位置確是有偏差的
這裏的解決辦法是直接在canvas標籤上的width和height設置長和寬。

<template>
  <div class="canvas">
    <button @click="resetCanvas">清空canvas</button>
    <canvas width="500px" height="300px" ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: "canvas",
  components: {},
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let canvas = this.$refs.canvas
      let ctx = canvas.getContext("2d")
      let startPosition = []
      let isdraw = false
      ctx.fillStyle = "#999999"
      ctx.fillRect(0, 0, 500, 300)
      ctx.lineWidth = 1
      canvas.onmousedown = res => {
        //指針在canvas上點擊
        isdraw = true;
        startPosition[0] = res.offsetX
        startPosition[1] = res.offsetY
        drawLine(res.offsetX,res.offsetY)
        console.log(res)
      };
      canvas.onmouseup = res => {
        //指針在canvas上放開
        if (!isdraw) return;
        clear()
      };
      canvas.onmouseout = res => {
        //指針移出canvas
        if (!isdraw) return;
        clear()
      };
      canvas.onmousemove = res => {
        //指針在canvas移動
        if (!isdraw) return;
        drawLine(res.offsetX,res.offsetY)
      };
      function drawLine(X,Y) {
        //畫圖
        if (!isdraw) return;
        ctx.beginPath();
        console.log(X,Y)
        ctx.moveTo(startPosition[0],startPosition[1])
        startPosition = [X,Y]
        ctx.lineTo(X,Y);
        ctx.stroke();
        ctx.save()
      }
      function clear() {
        isdraw = false;
        startPosition = []
      }
    },
    resetCanvas() {
      //清空canvas
      let canvas = this.$refs.canvas
      let ctx = canvas.getContext("2d")
      let startPosition = []
      let isdraw = false
      ctx.fillStyle = "#999999"
      ctx.fillRect(0, 0, 500, 300)
    }
  }
};
</script>
<style lang='scss' scoped>
canvas {
  
}
</style>

哈哈字有點醜~~~但是問題不大！！！