在学习制作画板之前，我们先来了解一下canvas标签1.canvas标签1.canvas标签类似于img标签，但是canvas标签是闭合标签，没有srcalt属性2.canvas标签有两个属性，width和height。当我们使用canvas在页面上绘制画布时，width和height属性用于设置大小。如果用css设置的话，绘制图片的时候可能会变形。3.渲染上下文contextcanvas最初是空白的。为了演示，首先脚本需要找到渲染上下文，然后在其上绘制。getContext()方法可以获取上下文上下文。2.创建画板画板功能：可以绘制不同颜色和粗细的线条，画板具有橡皮擦功能、一键清除功能、下载功能。1.首先我们需要绘制一个适应屏幕宽度的画布。functionwResize(){varpageWidth=document.documentElement.clientWidthvarpageHeight=document.documentElement.clientHeightcanvas.width=pageWidthcanvas.height=pageHeight}2.用户在画板上绘图时，有三种状态，鼠标点击状态，鼠标移动状态，鼠标离开状态。我们可以使用mousedown、mousemove、mouseup来监控这三种状态。当用户点击鼠标时：canvas.onmousedown=function(a){varx=a.clientX;vary=a.clientY;using=true;//设置变量，标志开始使用画布if(eraserEnabled){//如果标志使用橡皮擦，则清除画布内容context.clearRect(x,y,20,20);}else{否则记录当前鼠标坐标lastPoint={x:x,y:y}}}当用户移动鼠标时：canvas.onmousemove=function(a){varx=a.clientX;vary=a.clientY;if(!using){return}//判断是否使用画板if(eraserEnabled){//如果标志使用橡皮擦，则清除画布内容context.clearRect(x,y,20,20);}else{//如果没有使用橡皮擦varnewPoint={"x":x,"y":y};//记录鼠标移动到新坐标drawLine(lastPoint.x,lastPoint.y,newPoint.x,newPoint.y)//画一条线lastPoint=newPoint;//使用当前坐标作为下一步移动的第一个坐标}}鼠标离开时：canvas.onmouseup=function(a){using=false;//设置变量，sign不使用绘图板}3.画直线functiondrawLine(x1,y1,x2,y2){context.beginPath();//开始移动笔画，路径Startcontext.moveTo(x1,y1);//实际坐标context.lineWidth=lineWidth;//默认线宽context.lineTo(x2,y2);//结束坐标context.stroke();context.closePath();//结束描边，路径结束}stroke()：通过线条绘制图形轮廓fill()：通过填充路径的内容区域生成实心图形4.画笔函数pen.onclick=function(){eraserEnabled=false;//设置变量，标志不使用橡皮擦pen.classList.add('active');//设置画板上画笔按钮的样式变化eraser.classList.remove('active');//设置画板上橡皮擦按钮的样式Change}5.橡皮擦函数eraser.onclick=function(){eraserEnabled=true;//标记使用橡皮擦eraser.classList.add('active');//设置画板上橡皮擦按钮样式变化pen.classList.remove('active');//设置画板上画笔按钮样式变化}6.一键清除功能clear.onclick=function(){context.clearRect(0,0,canvas.width,canvas.height);}这里使用clearRect(x,y,width,height)方法清除指定的矩形区域，并使清除的部分完全透明。x、y坐标为实际坐标，宽、高为清空矩形区域的大小。7、一键下载功能download.onclick=function(){varurl=canvas.toDataURL('image/png');vara=document.createElement('a');文档.body.appendChild(a);.href=网址；a.download='上下文';a.click();}canvas.toDataURL('image/png');该方法返回一张png格式图片的url，当用户点击画板按钮上的下载按钮时，在html中插入一个a标签，a.download指向画布的上下文，download属性指定超链接要下载的目标。三、手机适配画板1、添加meta标签：由于浏览器在手机端显示页面时会初始缩放页面，所以我们可以在meta标签中设置metaviewport属性，告诉浏览器不要缩放页面.width=用户设备屏幕宽度
