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，希望对大家有帮助。