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,清除画布的内容。

欢迎大家关注我的公众号，一起交流进步