canvas 实现绘画板
起始:使用HTML5的canvas特性,在Vue+element项目中,结合JS实现你画我猜小游戏绘画板,也可以满足订单在确认时候签名的需求。保存了鼠标的轨迹,还有绘画圆形、正方形,切换画笔颜色,清除画板等功能。也可以将其保存为一张图片。
最终效果展示:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fd7d15a8a062208f5085121532da5f13.png)
代码实现:
- 创建canvas元素
<canvas
id="canvas"
width="800"
ref="canvas"
height="400"
@mousedown="canvasDown"
@mousemove="canvasMove"
@mouseout="canvasUp"
@mouseup="canvasUp"
></canvas>
- 初始化画布
initCanvas() {
(this as any).canvasDom = this.$refs.canvas;
this.ctx = (this as any).canvasDom.getContext("2d");
}
- 画笔、圆形、正方形功能
<div
class="drawingBoard"
style="
margin-bottom: 10px;
display: flex;
align-items: center;
margin-left: 274px;
"
>
<el-button @click="changeType('huabi')" type="primary">画笔</el-button>