任务描述：

1>制作一个手机端的手绘板
2>要求能有毛笔的笔锋
3>画线能有轻重感
4>能重播手写过程
5>能提交保存

刚到公司接到这个任务，直接吓蒙我了。以前一直做的是后台开发，前台的html和js以及css都不会。

首先要先建立一个canvas画板。

<div><canvas >您的浏览器不支持本网页</canvas><div>

其中的文字会在不支持的浏览器中显示出来。记得加一个ID我这里就叫"canvas"

在js中获取到这个组件，并初始化：

var canvas = document.getElementById("canvas");//获取组件 canvas.width=(window.innerWidth-10)/3*2; //设置组件宽度 canvas.height=(window.innerHeight)/2-50; //设置组件高度 canvas.align="center"; //设置组件的位置，这里是居中。

画板就做好了，有了画板还缺支笔。那就去买支2d的笔吧 \（>_<）/ ：

var ctx =canvas.getContext("2d"); //canvas的笔，这支笔只能在canvas这个画板上画图。 ctx.lineWidth=10; //画笔粗细 ctx.strokeStyle = "#000"; //画笔颜色 ctx.setAntiAlias(true); ctx.fillStyle = ctx.strokeStyle; //设置填充风格

画板和画笔都准备好了，可是还是不能动手，为什么呢？

呵呵，还没有拿笔的“手”呢！到底是手机触屏画呢，还是鼠标在电脑屏幕上画呢？这是个问题，别急，且看下面：

var touchable = 'createTouch' in document;//创建触摸事件 if (touchable) {//如果是触屏事件 canvas.addEventListener('touchstart', onTouchStart, false);//增加触摸开始监听事件 canvas.addEventListener('touchmove', onTouchMove, false);//监听触摸移动事件 canvas.addEventListener('touchend', onTouchEnd, false);//增加触摸结束事件 }else{//鼠标点击事件 document.onmousedown=onMouseDown;//鼠标压下事件 //document.onmousemove=onMouseMove;//鼠标移动事件 document.onmouseup=onMouseUp;//鼠标松开事件 } 不知道大家有没有发现，我吧鼠标移动事件给注释了。有没有知道为什么的朋友呢？

其实很简单，如果不注释掉，那么不需要按下鼠标就会发生画图事件了。那么怎么解决这个问题呢？

//鼠标被压下时事件 function onMouseDown(event){ lastX=event.clientX-canvasPosition.x;//获取点X坐标 lastY=event.clientY-canvasPosition.y;//获取点Y坐标 drawRound(ctx,lastX,lastY);//在开始点画圆 //putNewOne(lastX,lastY,startlindwidth,0);//此函数在后面解释 document.onmousemove=onMouseMove;//设置鼠标移动函数 } //鼠标按钮被压下后拖动事件 function onMouseMove(event){ try{ event.preventDefault();//这一行的具体作用就是防止你的浏览器会有一些手势操作的功能跟你在画图的时候冲突 drawLine(lastX,lastY,event.clientX-canvasPosition.x,event.clientY-canvasPosition.y);//画线函数 lastX=event.clientX-canvasPosition.x; lastY=event.clientY-canvasPosition.y;//获取点坐标 //putNewOne(lastX,lastY,thisLineWidth,dis); }catch(err){ alert(err.description); } } //鼠标松开后的事件执行 function onMouseUp(event){ document.onmousemove=null; canvasToImage(); }

对了，就是将这个放到鼠标压下事件中去处理，完了再在鼠标松开的时候设置为null。

这里基本就可以完成电脑端的绘图板了。可惜，任务还没完成啊。

任务要求是手机端的，那么就只能这么办了。

在度娘的用心教导下，我终于知道了怎么处理触摸监听事件并画图了，客官请往下看：

//触摸开始事件 function onTouchStart(event) { ctx.lineWidth=startlindwidth; //设置开始的线宽 event.preventDefault(); //从这里开始这个函数就不解释了 lastX=event.touches[0].pageX-canvasPosition.x;//获取X坐标 lastY=event.touches[0].pageY-canvasPosition.y;//获取Y坐标 putNewOne(lastX,lastY,startlindwidth,0);//此处也不解释了 drawRound(ctx,lastX,lastY);//第一个点画圆 } //触摸滑动事件 function onTouchMove(event) { try { event.preventDefault(); last1X=event.touches[0].pageX-canvasPosition.x; last1Y=event.touches[0].pageY-canvasPosition.y; dis=distance(lastX,lastY,last1X,last1Y); //计算两点之间的距离函数，方便任务三的完成，请看下面分析 if(initFlag==1){ lastLineWidth=startlindwidth; initFlag=0; } drawLine(ctx,lastX,lastY,last1X,last1Y); //画线函数 lastX=event.touches[0].pageX-canvasPosition.x; lastY=event.touches[0].pageY-canvasPosition.y; putNewOne(lastX,lastY,thisLineWidth,dis); } catch(err){ alert(err.description); } } function onTouchEnd(event){ drawRound(ctx,lastX,lastY); canvasToImage(); //将生成的图片生成数据传入后台 }下面是画线，画圆函数，以及将画出的图生成数据函数： //画圆 function drawRound(ctx,x,y){ ctx.beginPath(); ctx.arc(x,y,(ctx.lineWidth-1)/2,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } //画线 function drawLine(ctx,startX,startY,endX,endY){ ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(startX,startY); ctx.lineTo(endX,endY); ctx.stroke(); } function convertCanvasToImage(canvas) { //将canvas的图生成DataURL的数据 var image = new Image(); image.src = canvas.toDataURL("image/png"); var img=document.getElementById("img"); img.value=image.src; } function canvasToImage(){ //将canvas所画的生成数据调用 convertCanvasToImage(document.getElementById('canvas')); }既然这里谈到了上传，那么有一点html知识的就知道需要一个form表单吧： <form action="" method="post"> <!-- 这里action请您自己填写，我这里就不详细显示给您了 --> <input type="hidden" /><br /> <input type="submit" value="提交" /> <input type="button" value="清空" /> <input type="button" value="增加"  /> </form>这个表单是不是足够简单？ 好了，今天就先实现到这里，请期待后续的。