vue中使用canvas绘图详解
作者:@小鱼游啊游
这篇文章主要介绍了vue中使用canvas绘图方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
canvas基本使用
HTML5 的 <canvas>
元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
路径线段
<template lang="pug"> div // 规定矩形区域的宽和高 <canvas id="myCanvas" width="500" height="300"></canvas> </template> <script> export default { data() { return {} }, mounted() { this.xianDuan() }, methods: { xianDuan(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(0,0); // moveTo(x,y) 定义线条开始坐标 ctx.lineTo(200,100); // lineTo(x,y) 定义线条结束坐标 ctx.stroke(); }, } } </script>
运行效果:
三角形
- 无填充色
mounted() { this.sanJiaoXing() }, methods: { 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(); // 无填充色 }, }
运行效果:
- 有填充色
mounted() { this.sanJiaoXing() }, methods: { 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.fill(); // 有填充色 }, }
圆
使用 arc() 方法 绘制一个圆:
mounted() { this.yuan() }, methods: { yuan() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); // Math.PI圆周率π = 3.14 = 180° ctx.stroke(); }, }
- canvas实现笑脸
mounted() { this.xiaoLian() }, methods: { xiaoLian() { let canvas = document.getElementById('myCanvas'); let ctx = canvas.getContext('2d'); 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(); }, }
字体
mounted() { this.ziTi() }, methods: { ziTi() { let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); ctx.font="30px Arial"; // 设置字体及大小 ctx.fillText("Hello World 泥巴巴", 10, 150); // 实心文字 ctx.strokeText("Hello World 泥巴巴", 10, 180); // 空心文字 } }
渐变
mounted() { this.jianBian() }, methods: { 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,"orange"); // 渐变结束色 ctx.fillStyle = grd; // 填充色 ctx.fillRect(10,10,200,100); // (x,y,width,height) 矩形坐标和宽高 } }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。