Canvas的简易写字板功能实现

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;
}
```