javascript橡皮擦功能
时间: 2023-08-14 12:05:09 浏览: 47
以下是一个简单的JavaScript橡皮擦功能的实现:
```javascript
// 获取画布元素和上下文对象
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 鼠标按下事件处理函数
function onMouseDown(e) {
// 设置橡皮擦大小和颜色
const eraserSize = 20;
const eraserColor = '#fff';
// 获取鼠标在画布上的坐标
const x = e.offsetX;
const y = e.offsetY;
// 开始擦除
ctx.save();
ctx.beginPath();
ctx.arc(x, y, eraserSize / 2, 0, 2 * Math.PI);
ctx.clip();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
// 监听鼠标移动和松开事件
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
}
// 鼠标移动事件处理函数
function onMouseMove(e) {
// 获取鼠标在画布上的坐标
const x = e.offsetX;
const y = e.offsetY;
// 擦除指定区域
ctx.save();
ctx.beginPath();
ctx.arc(x, y, eraserSize / 2, 0, 2 * Math.PI);
ctx.clip();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
}
// 鼠标松开事件处理函数
function onMouseUp(e) {
// 取消监听鼠标移动和松开事件
canvas.removeEventListener('mousemove', onMouseMove);
canvas.removeEventListener('mouseup', onMouseUp);
}
// 监听鼠标按下事件
canvas.addEventListener('mousedown', onMouseDown);
```
该代码会监听画布元素上的鼠标按下事件,当鼠标按下时,会在画布上的指定坐标位置开始擦除,并且同时监听鼠标移动和松开事件。当鼠标移动时,会不断地擦除指定区域,直到鼠标松开为止。你可以根据需要修改代码以实现更多的功能,比如添加橡皮擦大小调整、保存擦除后的结果等。