Canvas实现橡皮擦
【摘要】 👝高级阶段——一个小项目助你玩透canvas~ 🏆（1）实现橡皮擦 1️⃣难点：如何清除canvas画布上指定区域：使用clearRect() 方法清空指定矩形区域。 JavaScript 语法： context.clearRect(x,y,width,height)参数参数值x要清除的矩形左上角的 x 坐标y要清除的矩形左上角的 y 坐标width要清除的矩形的宽度height要清...
👝高级阶段——一个小项目助你玩透canvas~
🏆（1）实现橡皮擦
1️⃣难点：如何清除canvas画布上指定区域：
使用clearRect() 方法清空指定矩形区域。
JavaScript 语法：
context.clearRect(x,y,width,height)
| 参数 | 参数值 |
|---|---|
| x | 要清除的矩形左上角的 x 坐标 |
| y | 要清除的矩形左上角的 y 坐标 |
| width | 要清除的矩形的宽度 |
| height | 要清除的矩形的高度 |
⚠️难点解决——代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#c{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="c" width="1000" height="700"></canvas>
</body>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var ctx = c.getContext("2d");
// 填充整个canvas为lightgray颜色
ctx.fillStyle = "lightgray";
ctx.fillRect(0,0,1000,700);
// 清除指定区域中的内容
ctx.clearRect(100,100,100,100)
</script>
</html>
⚠️难点解决——实现效果：
2️⃣项目——代码实现：
实现效果——实现橡皮擦，即鼠标点下去移动所经过位置擦除，鼠标松开不清除。
-
本项目实现时需要注意的是：
-
在监听canvas的onmousemove事件(鼠标移动事件)时：
-
c.onmousemove = function(e){ e.clientX; e.pageX; c.offsetLeft; }
-
关于获取到的关于鼠标移动信息的几个量e.clientX; e.pageX;和 c.offsetLeft;都不能直接作为判断鼠标点击处区域的清除：
-
第一个原因是：上述几个量各自代表的含义如下：（它们的含义决定它们不是鼠标相对于canvas的真实坐标！）
- e.clientX是鼠标距离网页窗口左边缘的距离 所以不能作为定位鼠标位置的量，因为窗口可以上下左右滑动，画布位置相对于窗口会变；
- e.pageX是鼠标距离网页内容左边缘的距离；
- c.offsetLeft是canvas相对于浏览器左边的距离
- 所以我们通过组合使用e.pageX和c.offsetLeft即可实现鼠标真实坐标的定位。在此要理解一个点是：canvas画布的坐标轴并不是直接与网页的坐标轴重合！所以才会有e.pageX（以网页的坐标轴为参考系）和c.offsetLeft（以canvas画布的坐标系为参考系）两种量。而我们只需要使用e.pageX-c.offsetLeft（理解为将canvas画布的坐标轴向左上网页的坐标轴平移直至重合）即可定位到鼠标的真实坐标。
- 第二个原因是：context.clearRect(x,y,w,h);方法清除的是指定坐标(x,y)，宽w，高h的矩形区域。
- 注意：这个宽是指以(x,y)坐标向右x轴的长度；这个高是指以(x,y)坐标向下y轴的长度。所以我们定位到的鼠标坐标应该在x轴和y轴同时向左上canvas画布的原点处移动w/2和h/2个像素长。即e.pageX-c.offsetLeft - w/2，这就是清除区域的x坐标的推理过程。y坐标类似，小伙伴们自己多加思考哦！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#c{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="c" width="1000" height="700"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var ctx = c.getContext("2d");
// 填充整个canvas为lightgray颜色
ctx.fillStyle = "lightgray";
ctx.fillRect(0,0,1000,700);
// 清除指定区域中的内容
//ctx.clearRect(100,100,100,100)
// 监听canvas的onmousedown事件(鼠标点击事件)
c.onmousedown = function(ev){
c.onmousemove = function(e){ // .onmousemove是鼠标移动事件
console.log(e); // 控制台打印e会发现它是鼠标移动所有信息的一个量
// e.clientX是鼠标距离网页窗口左边缘的距离 所以不能作为定位鼠标位置的量，因为窗口可以上下左右滑动，画布位置相对于窗口会变！
// e.clientY是鼠标距离网页窗口上边缘的距离
// e.pageX是鼠标距离网页内容左边缘的距离
// e.pageY是鼠标距离网页内容上边缘的距离
// c.offsetLeft是canvas相对于浏览器左边的距离
// c.offsetTop是canvas相对于浏览器上方的距离
var w = 20; // 清除区域的宽度
var h = 20; // 清除区域的高度
var x = e.pageX-c.offsetLeft - w/2; // 清除区域的x位置
var y = e.pageY-c.offsetTop - h/2; // 清除区域的y位置
ctx.clearRect(x,y,w,h);
}
}
c.onmouseup = function(ev){ // .onmouseup是鼠标松开事件
// 取消onmousemove事件
c.onmousemove = null;
}
</script>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）