在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>
全部评论