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