vue页面绘图_利用vue制作在线涂鸦板

效果展示

Canvas API简介

调用方法

getImageData() 返回ImageData对象，该对象为画布上指定的矩形复制像素数据

putImageData() 把图像数据(从指定的 ImageData 对象)放回画布上

clearRect() 在给定的矩形内清除指定的像素

toDataURL() 返回canvas图像的URL

lineTo() 添加一个新点，创建从该点到最后指定点的线条

stroke() 绘制已定义的路径

beginPath() 起始一条路径，或重置当前路径

moveTo() 把路径移动到画布中的指定点，不创建线条

调用属性

strokeStyle 设置或返回用于笔触的颜色、渐变或模式

shadowBlur 设置或返回用于阴影的模糊级别

shadowColor 设置或返回用于阴影的颜色

lineWidth 设置或返回当前的线条宽度

功能需求说明

基础线条绘制功能

笔触颜色修改

笔刷粗细调整

撤回、前进、情况功能

生成图片

初始化数据

colors: 笔触颜色列表

brushs: 笔刷对应的粗细

context: canvas context

imgUrl: 用于存放保存图片的地址

canvasMoveUse: 是否允许执行move时候绘制线条

preDrawAry: 存储当前表面状态数组-上一步

nextDrawAry: 存储当前表面状态数组-下一步

middleAry: 中间数组