canvas橡皮擦功能
时间: 2023-10-20 13:07:00 浏览: 49
要实现canvas橡皮擦功能,可以通过设置globalCompositeOperation属性为destination-out来实现。具体步骤如下:
1. 创建一个canvas元素和一个context对象。
2. 设置context的globalCompositeOperation属性为destination-out。
3. 监听鼠标事件,当鼠标按下时,在鼠标移动的过程中,将鼠标经过的区域的像素设置为透明。
4. 当鼠标抬起时,停止擦除操作。
以下是一个简单的示例代码:
```html
<canvas id="myCanvas" width="500" height="500"></canvas>
```
```javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-out';
let isErasing = false;
canvas.addEventListener('mousedown', () => {
isErasing = true;
});
canvas.addEventListener('mousemove', (e) => {
if (isErasing) {
const x = e.offsetX;
const y = e.offsetY;
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fill();
}
});
canvas.addEventListener('mouseup', () => {
isErasing = false;
});
```