本期的小需求:
在页面中实现一个能进行绘画的画板
能实现画笔颜色、粗细、撤回等功能
开发环境
Vue + elementUI
采坑记录
画笔与鼠标错位 （恶心很久）（样式设置长宽canvas导致）画笔切换颜色 粗细图片跨域等等.....动手
1.生成或选中canvas对象
// html<canvas id="box"></canvas>// vuelet canvas = $("#canvas")[0]//$("#canvas")获取的是jquery对象 不是真实的dom对象 要么使用dom操作获取复制代码
2.生成绘画画布环境
let canvas = $("#canvas")[0]//$("#canvas")获取的是jquery对象 不是真实的dom对象 要么使用dom操作获取let ctx = canvas.getContext("2d")//getContext() 方法返回一个用于在画布上绘图的环境。//目前只接受 2d 这个参数复制代码
ps: canvas 画板绘制api
//矩形ctx.fillRect(x, y, width, height)//绘制一个填充的矩形ctx.strokeRect(x, y, width, height)//绘制一个矩形的边框ctx.clearRect(x, y, widh, height)//清除指定的矩形区域，然后这块区域会变的完全透明//线条路径ctx.beginPath()//新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径ctx.moveTo(x, y)//把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。ctx.closePath()//闭合路径之后，图形绘制命令又重新指向到上下文中ctx.stroke()//通过线条来绘制图形轮廓ctx.fill()//通过填充路径的内容区域生成实心的图形// 绘制圆弧ctx.arc(x, y, r, startAngle, endAngle, anticlockwise)://以(x, y)为圆心，以r为半径，从tartAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)//这里的度数都是弧度。//0弧度是指的x轴正方形//radians=(Math.PI/180)*degrees //角度转换成弧度ctx.arcTo(x1, y1, x2, y2, radius)://根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点复制代码
3.canvas 画板实现
实现思路： 监听鼠标事件，用drawCircle()方法画出来
监听画板区域鼠标事件,未开始时设置painting 为 false当鼠标按下时(mousedown),开启画笔函数，painting为true,鼠标松开之前记录路径点,并绘制记录点使用lineTo()函数把每个点连接鼠标松开的时候（mouseup）,关闭画笔函数
data(){return{isClear：false}}canvasLoad(){let canvas = $("box")[0];let context = canvas.getContext("2d");//let img = new Image();img.src = "";//因为我这个画板是有背景图的所以需要加载img 如若不需要忽略此步img.onload = () =>{//使用onload函数 在img src加载完毕后调用let width = img.widthlet height = img.height//onload 后才能获取到图片尺寸canvas.width = widthcanvas.height = height// ****切忌使用css去指定canvas宽高****//css设置canvas元素宽高会导致像素点被压缩//导致canvas 元素点定位偏差 以及 画笔等错位//如需缩放 设置先设置img宽高 压缩 在把宽高赋予给canvascontext.drawImage(img, 0, 0, width,height);//绘制背景图this.drawLine()// 定义画笔$("#blackBtn").click(() => {context.strokeStyle = "#000000";});$("#whiteBtn").click(() => {context.strokeStyle = "#FFFFFF";});$("#clearBtn").click(() => {// 清屏context.clearRect(0,0,innerWidth,innerHeight)});$("#eraserBtn").click(() => {// 橡皮擦this.isClear=true;});$("#widthBtn").click(() => {// 设置画笔宽度// 不是点击事件 可以改成监听等等context.lineWidth = width;});// 调整画笔颜色的点击事件可供参考// context需保持上下文一致}}drawLine() {const that = thislet canvas = $("#box")[0];let context = canvas.getContext("2d");context.canvas.addEventListener("mousedown", startAction)// 监听画板鼠标按下事件 开始绘画context.canvas.addEventListener("mouseup", endAction)// 监听画板鼠标抬起事件 结束绘画function startAction(event) {//监听鼠标移动事件//如果没有使用橡皮擦就画线if (!that.isClear) {//开始新的路径context.beginPath();context.lineCap = "round";// 结束 及 开始 圆形线帽context.moveTo(event.pageX,event.pageY);context.stroke();}context.canvas.addEventListener("mousemove", moveAction);}//封装鼠标抬起函数function endAction() {//不再使用橡皮擦that.isClear=false;//移除鼠标移动事件context.canvas.removeEventListener("mousemove",moveAction);}function moveAction(event) {//判断是否启动橡皮擦功能if(that.isClear){context.clearRect(event.pageX-8,event.pageY-8,16,16);return;}context.lineTo(event.pageX,event.pageY);context.stroke();}}复制代码
4.实现撤回功能
data(){return{...canvasHistory}}.... canvasLoad(){...$("#recallBtn").click(() => {// 撤回画板img.src = that.canvasHistory[that.canvasHistory.length-1]// 撤回回上一个版本//重新绘制过程this.canvasLoad()// 撤回完成后删除最后一项that.canvasHistory.pop()});...}drawLine(){function startAction() {...that.canvasHistory.push(canvas.toDataURL())//每次开始绘画前 把上一个版本的canvas转化为url放进数组中}}复制代码
如果觉得《前端学习笔记----canvas实现画板及定制画笔(画笔错位 撤回 粗细 颜色)》对你有帮助，请点赞、收藏，并留下你的观点哦！
