canvas简易画布

今天学习了canvas，利用它做了一个简易版的画板，校验自己所学的知识，分享出来以供大家学习指教。先上效果图。

主要是使用了canvas的stroke和clearReact来实现画板的绘画和橡皮擦功能，然后通过监听鼠标的按下、移动、弹起事件，完成绘画及擦除功能。直接上才艺代码

html:

<input type="button" value="画笔" class="active" />
<input type="button" value="橡皮擦" /><br />
<canvas id="c1" width="600" height="600">在这里的代码看不到，不支持canvas的浏览器可以看到</canvas>

css：

body {
    background-color: black;
}

#c1 {
    background-color: #fff;
}

.active {
    background-color: red;
}

javascript:

var oC = document.getElementById('c1') //获取canvas容器
var ctx = oC.getContext('2d') //生成画笔
var num = 0; //通过num的值，判断是画笔还是橡皮擦
var aInput = document.getElementsByTagName('input'); //获取按钮dom元素

for (var i = 0; i < aInput.length; i++) {
    aInput[i].index = i //给dom元素添加自定义属性
    aInput[i].onclick = function () {
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].className = '' //将class清空
        }
        this.className = 'active' //点击的按钮样式置为active
        num = this.index //更改状态
    }
}

oC.onmousedown = function (e) {
    var x = e.pageX - oC.offsetLeft; //获取坐标x值
    var y = e.pageY - oC.offsetTop; //获取坐标y值
    ctx.beginPath();
    ctx.moveTo(x, y)
    oC.onmousemove = function (e) {
        var x = e.pageX - oC.offsetLeft;
        var y = e.pageY - oC.offsetTop;
        if (num == 0) {
            ctx.lineTo(x, y);
            ctx.stroke();
        } else if (num == 1) {
            ctx.clearRect(x, y, 20, 20)
        }
    }
    oC.onmouseup = function (e) {
        oC.onmousemove = null;
        oC.onmouseup = null;
        ctx.closePath();
    }
}

关键点分析：
1、监听鼠标事件

通过onmousedown、onmousemove及onmouseup分别监听鼠标的按下、移动及弹起事件，并且在其回调函数中进行相关的处理
2、画图功能

通过canvas的stroke方法进行绘图，但是绘图之前我们需要先设置相应的坐标。首先是起点，起点很简单，就是鼠标按下的坐标，可以通过pageX和pageY获取到鼠标在页面中的坐标，再减去画布在页面中的偏移值，则得到鼠标按下时在画布中的位置，也就是起点，通过moveTo方法定义。而终点坐标类似，只是需要在鼠标移动事件中获取鼠标的坐标即终点，通过lineTo方法定义。最后通过stroke方法绘制。

为了避免多次绘制互相影响，我们可以通过canvas的beginPath和closePath形成一个闭合的互不影响的绘制。
3、橡皮擦功能

橡皮擦功能和画图功能类似，获取坐标的方法一模一样，只是最后调用的方法是clearRect,清除画布的内容。
 

欢迎关注微信公众号:猴哥说前端