canvas 实现绘画板

canvas 实现绘画板

起始：使用HTML5的canvas特性，在Vue+element项目中，结合JS实现你画我猜小游戏绘画板，也可以满足订单在确认时候签名的需求。保存了鼠标的轨迹，还有绘画圆形、正方形，切换画笔颜色，清除画板等功能。也可以将其保存为一张图片。

最终效果展示：

代码实现：

<canvasid="canvas"width="800"ref="canvas"height="400"@mousedown="canvasDown"@mousemove="canvasMove"@mouseout="canvasUp"@mouseup="canvasUp"></canvas>

初始化画布

//初始化canvasinitCanvas() {(this as any).canvasDom = this.$refs.canvas;this.ctx = (this as any).canvasDom.getContext("2d");}

画笔、圆形、正方形功能

<divclass="drawingBoard"style="margin-bottom: 10px;display: flex;align-items: center;margin-left: 274px;"><el-button @click="changeType('huabi')" type="primary">画笔</el-button><el-button @click="changeType('rect')" type="success">正方形</el-button><el-button@click="changeType('arc')"type="warning"style="margin-right: 10px">圆形</el-button><div>颜色</div><el-color-picker v-model="color"></el-color-picker><el-button @click="clear">清空</el-button><el-button @click="saveImg">保存</el-button></div>

// type 默认值为 ”huabi“changeType(type: any) {(this as any).type = type;},//画笔绘画huabiFn(ctx: any, x: any, y: any) {ctx.beginPath();ctx.arc(x, y, 5, 0, 2 * Math.PI);ctx.fillStyle = this.color;ctx.fill();ctx.closePath();},//正方形rectFn(ctx: any, x: any, y: any) {const beginX = this.beginX;const beginY = this.beginY;ctx.clearRect(0, 0, 800, 400);this.imageData && ctx.putImageData(this.imageData, 0, 0, 0, 0, 800, 400);ctx.beginPath();ctx.strokeStyle = this.color;ctx.rect(beginX, beginY, x - beginX, y - beginY);ctx.stroke();ctx.closePath();},//圆形arcFn(ctx: any, x: any, y: any) {const beginX = this.beginX;const beginY = this.beginY;this.isDraw && ctx.clearRect(0, 0, 800, 400);this.imageData && ctx.putImageData(this.imageData, 0, 0, 0, 0, 800, 400);ctx.beginPath();ctx.strokeStyle = this.color;ctx.arc(beginX,beginY,Math.round(Math.sqrt((x - beginX) * (x - beginX) + (y - beginY) * (y - beginY))),0,2 * Math.PI);ctx.stroke();ctx.closePath();},

监听鼠标mousedown、mousemove、mouseout和mouseup事件。当触发mousedown时执行canvasDown方法，isdraw 为 true，记录当前坐标。

当鼠标移动移动时触发canvasMove方法，通过当前type的值判断是画笔，正方形还是圆形，分别调用想用方法进行绘制：(this as any)[${this.type}Fn](ctx, x, y)。

当鼠标离开或者松开时触发canvasUp方法，isDraw为false，完成一次绘画。

//鼠标按下时触发canvasDown(e: any) {this.isDraw = true;const canvas = this.canvasDom;this.beginX = e.pageX - (canvas as any).offsetLeft;this.beginY = e.pageY - (canvas as any).offsetTop;},//鼠标移动时候触发canvasMove(e: any) {if (!this.isDraw) return;const canvas = this.canvasDom;const ctx = this.ctx;const x = e.pageX - (canvas as any).offsetLeft;const y = e.pageY - (canvas as any).offsetTop;(this as any)[`${this.type}Fn`](ctx, x, y);},//当鼠标松开或者离开时候触发canvasUp() {this.imageData = (this as any).ctx.getImageData(0, 0, 800, 400);this.isDraw = false;},

清空功能，使用canvas的context.clearRect(x,y,width,height)方法。

| 参数 | 描述 |

|--------|-------|

| x | 要清除的矩形左上角的 x 坐标。 |

| y | 要清除的矩形左上角的 y 坐标。 |

| width | 要清除的矩形的宽度，以像素计。 |

| height | 要清除的矩形的高度，以像素计。 |

//清空画板clear() {(this.imageData = null as any),(this as any).ctx.clearRect(0, 0, 800, 400);},

切换画笔颜色，直接使用element-ui组件库colorPicker颜色选择器。保存图片。 toDataURL()方法把画布里的图案转变成base64编码格式的png，然后返回 Data URL数据。创建一个a标签，设置a的href、download。点击保存按钮，触发a标签的click事件。

//保存图片saveImg() {const url = (this as any).canvasDom.toDataURL();const a = document.createElement("a");a.download = "Img";a.href = url;document.body.appendChild(a);a.click();document.body.removeChild(a);},

总结：基本功能已经实现，其实还有很多效果可以实现，比如说喷雾效果，蜡笔效果，艺术画效果等等。日后有时间我会继续对这个画板进行优化，增加一些新的功能，同时适配移动端，运用在订单确认签名这样的需求。

项目地址GitHub: canvas实现绘画板.