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;
}
1548753755342.png

正确的做法，我们应该给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
1548753786589.png

响应式画布：

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();
}
}
}