canvas简易画布

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

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

html:

在这里的代码看不到，不支持canvas的浏览器可以看到

css：

body { }

#c1 { }

.active { }

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(); } }

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118612183