canvas在vue中的應用

使用cavas可以繪制各種圖表、生成二維碼、制作H5小游戲。

生命周期
canvas應該在mounted的生命周期中初始化，在updated中是無效的。

export default {
  mounted() {
    this.initCanvas()
  },
  methods: {
    initCanvas() {
      console.log("初始化canvas")
      let canvas = document.getElementById('canvas');
      let ctx = canvas.getContext('2d');
    }
  }
}

響應式畫布
當需要使canvas鋪滿全屏時，直接使用css聲明的效果不是我們需要的效果。

// 錯誤的效果，將造成圖像變形拉伸
.canvas {
  width: 100vw;
  height: 100vh;
}

正確的做法，我們應該給canvas的寬高賦值：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let winW = window.innerWidth
let winH = window.innerHeight
canvas.width = winW
canvas.height = winH

響應式畫布：

let canvas;
let ctx;
export default {
  mounted() {
    this.initCanvas()
    // 當調整窗口大小時重繪canvas
    window.onresize = () => {
      this.initCanvas()
    }
  },
  methods: {
    initCanvas() {
      console.log("初始化canvas")
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext('2d');
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
      this.drawSmile()
    },
    drawSmile() {
      ctx.beginPath();
      ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 繪制
      ctx.moveTo(110, 75);
      ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(順時針)
      ctx.moveTo(65, 65);
      ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
      ctx.moveTo(95, 65);
      ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
      ctx.stroke();
    }
  }
}