在vue中使用canvas绘图

19人浏览 / 0人评论 / 添加收藏

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>

全部评论

搜索