在vue中使用canvas绘图

HTML5 的 <canvas> 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

话不多说，咱们接下来直接上代码：

文件名：PaintBoard.vue

<template> <div style="align:center"><canvas id="myCanvas" width="1000" height="800"></canvas></div> </template>

<script> export default { data() { return {} }, mounted() { this.xianDuan() this.sanJiaoXing() this.yuan() this.xiaoLian() this.ziTi() this.jianBian() }, methods: { xianDuan() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(140,40); // moveTo(x,y) 定义线条开始坐标 ctx.lineTo(260,100); // lineTo(x,y) 定义线条结束坐标 ctx.stroke(); }, sanJiaoXing() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(100, 200); ctx.lineTo(400, 200); ctx.lineTo(0, 0); // ctx.stroke(); // 无填充色 ctx.fill(); // 有填充色 }, yuan() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(495,50,40,0,2*Math.PI); // Math.PI圆周率π = 3.14 = 180° ctx.stroke(); }, xiaoLian() { let canvas = document.getElementById('myCanvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(375, 75, 50, 0, Math.PI * 2, true); // 绘制 ctx.moveTo(410, 75); ctx.arc(375, 75, 35, 0, Math.PI, false); // 口(顺时针) ctx.moveTo(365, 65); ctx.arc(360, 65, 5, 0, Math.PI * 2, true); // 左眼 ctx.moveTo(395, 65); ctx.arc(390, 65, 5, 0, Math.PI * 2, true); // 右眼 ctx.stroke(); }, ziTi() { let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); ctx.font="30px Arial"; // 设置字体及大小 ctx.fillText("Hello World 很好玩", 110, 350); // 实心文字 ctx.strokeText("Hello World 很好玩", 110, 380); // 空心文字 }, jianBian() { let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); var grd = ctx.createLinearGradient(0, 0, 200,0); // 设置渐变 grd.addColorStop(0,"red"); // 渐变起始颜色 grd.addColorStop(1,"black"); // 渐变结束色 ctx.fillStyle = grd; // 填充色 ctx.fillRect(10,10,200,100); // (x,y,width,height) 矩形坐标和宽高 } } } </script>