vue canvas学习

说明

在vue里试用一下canvas，记录一下

代码

<template><div><canvas ref="canvas1" height="500" width="500"></canvas><button @click="draw">画图</button></div>
</template><script>
export default {data() {return {};},methods: {draw() {var canvas1 = this.$refs.canvas1;var ctx = canvas1.getContext("2d");//绘制矩形ctx.fillStyle = "red";ctx.fillRect(20, 20, 150, 50);//绘制圆形ctx.fillStyle = "blue";ctx.beginPath();ctx.arc(250, 250, 50, 0, 2 * Math.PI);ctx.fill();//绘制直线ctx.strokeStyle = "green";ctx.beginPath();ctx.moveTo(100, 100);ctx.lineTo(200, 200);ctx.stroke();//绘制文字ctx.fillStyle = "black";ctx.font = "30px Arial";ctx.fillText("Hello World,测试", 100, 400);},},
};
</script><style>
</style>

参考

https://www.runoob.com/html/html5-canvas.html