前几天学习了HTML5的然后初始化js：letcanvas=document.getElementById("drawing-board");letctx=canvas.getContext("2d");我想让画板全屏，所以接下来设置画布的宽度和高度。让pageWidth=document.documentElement.clientWidth；让pageHeight=document.documentElement.clientHeight；canvas.width=pageWidth；canvas.height=pageHeight；由于有些IE不支持canvas，如果我们想兼容IE，可以创建一个canvas，然后使用Excanvas初始化，为IE添加exCanvas.js，这里暂不考虑IE。实现一个简单的画板实现思路：监听鼠标事件，使用drawCircle()方法绘制记录的数据。设置初始化当前画布为画笔状态的函数，painting=false，当鼠标按下（mousedown）时，设置painting为true，表示正在绘制，鼠标未松开。记录鼠标点击。按下鼠标时，鼠标移动（mousemove），点被记录和绘制。如果鼠标移动得太快，浏览器跟不上绘图速度，点与点之间就会有空隙，所以我们需要用线（lineTo()）将绘制的点连接起来。松开鼠标(mouseup)时，将绘画设置为false。代码：letpainting=false;letlastPoint={x:undefined,y:undefined};//鼠标按下事件canvas.onmousedown=function(e){painting=true;让x=e.clientX;让y=e.clientY;lastPoint={“x”：x，“y”：y};drawCircle(x,y,5);};//鼠标移动事件canvas.onmousemove=function(e){if(painting){letx=e.clientX;让y=e.clientY;让newPoint={"x":x,"y":y};drawLine(lastPoint.x,lastPoint.y,newPoint.x,newPoint.y,clear);最后一点=新点；}};//鼠标释放事件canvas.onmouseup=function(){painting=false;}//画点函数functiondrawCircle(x,y,radius){ctx.save();CTX。开始路径（）；ctx.arc(x,y,radius,0,Math.PI*2);ctx.fill();}//直线函数functiondrawLine(x1,y1,x2,y2){ctx.lineWidth=3;ctx.lineCap="圆形";ctx.lineJoin="圆形";ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();ctx.closePath();}橡皮擦函数实现思路获取橡皮擦元素，设置橡皮擦初始状态，clear=false。监听橡皮擦点击事件，点击橡皮擦，改变橡皮擦的状态，clear=true。当clear为真时，移动鼠标使用画布裁剪(clip())来擦除画布。leteraser=document.getElementById("eraser");letclear=false;eraser.onclick=function(){clear=true;};...if(clear){ctx.save();ctx.globalCompositeOperation="目标输出";ctx.stroke();ctx.closePath();ctx.clip();ctx.clearRect(0,0,canvas.width,canvas.height);ctx.restore();}...注意canvas中的裁剪与普通的裁剪函数不同。这里裁剪是指在裁剪区域显示我们绘制的图片。兼容移动端实现思路：判断设备是否支持touchtrue，使用touch事件；false,然后使用鼠标事件代码：...if(document.body.ontouchstart!==undefined){//使用触摸事件anvas.ontouchstart=function(e){//开始触摸}canvas.ontouchmove=function(e){//开始滑动}canvas.ontouchend=function(){//滑动结束}}else{//使用鼠标事件...}...这里需要注意的一点是，在触摸事件中，是通过.touches[0].clientX和.touches[0].clientY来获取坐标的，应该和鼠标事件区分开来。切换画笔颜色的实现思路：获取颜色元素节点。单击该颜色返回其颜色值并将其分配给画布的ctx.strokeStyle。代码：letaColorBtn=document.getElementsByClassName("color-item");for(leti=0;i
