1。画板功能修改画笔颜色；修改笔刷粗细；橡皮;重置绘图板；撤消上一步；另存为图片；2.所需知识Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。ctx.moveTo(x,y)将一个新的子路径的起点移动到(x,y)坐标ctx.lineTo(x,y)用一条直线将子路径的终点连接到x,y坐标3.分步实现第一步实现基本功能，绘制鼠标路径；classBoard{constructor(id){this.canvas=document.getElementById(id);this.context=this.canvas.getContext('2d');this.isDrawing=false;这个.posX=0;这个.posY=0;这个。初始化（）；}init(){常量bindDown=this.handleMouseDown.bind(this);constbindMove=this.handleMouseMove.bind(this);this.canvas.addEventListener('mousedown',bindDown);this.canvas.addEventListener('mousemove',bindMove);窗口.addEventListener('mouseup',()=>{this.isDrawing=false;});}handleMouseDown(e){constrect=this.canvas.getBoundingClientRect();this.posX=e.clientX-rect.left;this.posY=e.clientY-rect.top;this.isDrawing=true;}handleMouseMove(e){if(this.isDrawing===true){constrect=this.canvas.getBoundingClientRect();this.drawLine(this.context,this.posX,this.posY,e.clientX-rect.left,e.clientY-rect.top);this.posX=e.clientX-rect.left;this.posY=e.clientY-rect.top;}}drawLine(context,x1,y1,x2,y2){context.beginPath();context.strokeStyle='黑色';context.lineWidth=1;context.moveTo(x1,y1);context.lineTo(x2,y2);context.stroke();context.closePath();}}newBoard('myCanvas');第二步，可以修改画笔颜色；document.getElementById('colorPicker').addEventListener('change',e=>{b.changeColor(e.target.value);})classBoard{constructor(id,color='#000'){this.penColor=color;}drawLine(context,x1,y1,x2,y2){context.strokeStyle=this.penColor;}changeColor(color){this.penColor=color;}}第三步，修改画笔粗细；ctx.li新宽度=数字；第四步，橡皮擦；context.globalCompositeOperation='destination-out';参考scratch功能第五步，重新设置画板；context.clearRect(0,0,宽度,高度);第六步，撤消上一步；this.canvas.toDataURL()将当前画布保存为base64图像并将其存储在数组中。设置另一个索引，撤销/恢复修改索引的值，从数组中取出对应的图片。第七步，保存为图片；创建一个a标签，href为toDataURL()生成的图片，模拟点击事件，点击a链接。4.完整代码12345橡皮擦重新设置拔销恢复保存为图片
