Canvas，写个简易画板玩玩

相信canvas大家都听说过，今天我们就来用canvas写个简易画板。

首先，我们得在body的内部写个canvas标签

//注意:这里要给canvas标签一个边框，以便我们看到画布 <canvas id = "myCanvas" width="500" height = "500" style = "border:1px solid red;">这里写提示版本信息：您的浏览器版本太低，点击<a href ="###">下载</a>最新版本</canvas>

标签部分已经完成了。接下来就是js部分了：

在写js之前，分析要完成的动作—

- 鼠标按下，开始在画布上有响应，且按下的位置，即为画笔开始的位置。 - 鼠标拖动，获得的鼠标相对元素（画布）位置即为画笔最终的位置。 - 鼠标抬起，移动事件结束。

根据上述的分析，我们依次填补对应的事件：

//获取元素canvas var myCanvas = document.getElementById("myCanvas"); //设置画本基于2D形变 var context = myCanvas.getContext('2d'); //鼠标按下，获取当前位置 myCanvas.onmousedown = function(ev){ //兼容IE写法 var obj = ev || window.event; //鼠标按下事件，获取鼠标位于元素内部的当前位置，也就是画笔开始的位置 var startX = obj .clientX - myCanvas.offsetLeft; var startY = obj .clientY - myCanvas.offsetTop; 新建路径（图层），这里一定不能省略，表明路径开始，如果省略，不会报错，但是会造成将所有的东西都画在一个图层上，造成相互影响 context.beginPath(); //画笔开始位置 context.moveTo(startX,startY); //鼠标移动，获取当前位置，这里一定要写在onmousedown事件里面 myCanvas.onmousemove = function(ev){ var obj = ev || window.event; //拖动的时候重新获取鼠标的位置，作为画笔结束的位置，鼠标一直拖动，一直会触发这个事件。 var endX = obj .clientX - myCanvas.offsetLeft; var endY = obj .clientY - myCanvas.offsetTop; context.lineTo(endX,endY); //设置线条颜色 context.strokeStyle = "red"; //设置线条宽度，5像素 context.lineWidth = 5; // 将图形渲染到画布上，否则虽然画了东西，但是显示不出来 context.stroke(); } } //鼠标抬起，清空鼠标移动事件 myCanvas.onmouseup = function(){ myCanvas.onmousemove = null; }

结果： ）

最后 : 很简单的一个小例子，帮助我们初步了解canvas，希望对大家有帮助。