Document *{ margin: 0; padding: 0; } #box{ width: 500px; height: 500px; border: 1px solid red; position: relative; overflow: hidden; } .eraser{ width: 40px; height: 40px; border-radius: 20px; background: #ccc; position: absolute; border: 1px solid #666; top: 0; left: 0; display: none; }橡皮擦 var myCanvas = document.querySelector('#myCanvas'); var btn = document.querySelector('button'); var eraser = document.querySelector('.eraser'); var ctx = myCanvas.getContext('2d'); //定义变量,鼠标是否被按下 var isDown = false; //控制是否擦除效果 var isClear = false;
canvas--橡皮擦
最新推荐文章于 2024-04-01 16:46:43 发布
这篇博客介绍了如何使用HTML5的canvas元素实现一个简单的橡皮擦功能。通过监听鼠标事件,结合canvas的绘图和清除操作,实现了当鼠标按下时开始绘制,松开时停止,并且在按下橡皮擦按钮后,可以擦除画布上的内容。
摘要由CSDN通过智能技术生成