转发连接：https://segmentfault.com/a/1190000022535264
序言最近研究了HTML5一些新的元素属性，创造确实好用，特殊是里面的Canvas这个新的标签元素。官方先容：Canvas API（画布）是在HTML5中新增的标签用于在网页实时天生图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。以下利用JavaScript结合Canvas实现一个画板功能
效果演示图：
代码部分（直接复制便可利用）
<!DOCTYPEHTML> <html> <head> <metacharset="utf-8"> <title>JavaScript+Canvas实现自定义画板</title> </head> <body> <canvasid="canvas"width="600"height="300"></canvas> <scripttype="text/javascript"> varcanvas=document.getElementById("canvas"); varctx=canvas.getContext("2d"); //画一个玄色矩形 ctx.fillStyle="black"; ctx.fillRect(0,0,600,300); //按下标记 varonoff=false; //变量oldx跟oldy代表鼠标移动前的坐标 varoldx=-10; varoldy=-10; //设置颜色 varlinecolor="white"; //设置线宽 varlinw=4; //添加鼠标移动事宜 canvas.addEventListener("mousemove",draw,true);//第三个参数紧张跟捕获或者冒泡有关 //添加鼠标按下事宜 canvas.addEventListener("mousedown",down,false); //添加鼠标弹发难宜 canvas.addEventListener("mouseup",up,false); functiondown(event){ onoff=true; oldx=event.pageX-10; oldy=event.pageY-10; //console.log(event.pageX+'..............000.............'+event.pageY); //event.pageX跟event.pageY相对付全体页面鼠标的位置包括溢出的部分（便是滚动条） } functionup(){ onoff=false; } functiondraw(event){ if(onoff==true){ varnewx=event.pageX-10; varnewy=event.pageY-10; ctx.beginPath();//beginPath()丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为(0,0)。 ctx.moveTo(oldx,oldy);//移动到点击时候的坐标，以那个坐标为原点 ctx.lineTo(newx,newy);//绘制新的路径 ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke();//stroke()方法会实际地绘制出通过moveTo()和lineTo()方法定义的路径。默认颜色是玄色。 //将新的鼠标位置赋给下一次开始绘制的起始坐标 oldx=newx; oldy=newy; }; }; </script> </body> </html>末了
以为文章不错的，给我点个赞哇，关注一下呗！
作者：阿山
转发连接：https://segmentfault.com/a/1190000022535264
