如何实现橡皮擦Canvas来帮你？

图形开发canvashtml5

在HTML5的Canvas中，我们可以使用globalCompositeOperation属性来实现橡皮擦功能。这个属性定义了如何绘制源像素和目标像素。当设置为"destination-out"时，源像素会被视为透明，从而实现橡皮擦效果。

以下是一个简单的HTML和JavaScript示例，演示如何在Canvas上实现橡皮擦功能：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var isErasing = false;

// 初始化画布上的一个矩形
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);

// 鼠标按下时，开始橡皮擦模式
canvas.onmousedown = function(e) {
    isErasing = true;
    ctx.globalCompositeOperation = "destination-out";
};

// 鼠标松开时，结束橡皮擦模式
canvas.onmouseup = function(e) {
    isErasing = false;
    ctx.globalCompositeOperation = "source-over";
};

// 鼠标移动时，如果处于橡皮擦模式，则进行橡皮擦操作
canvas.onmousemove = function(e) {
    if (isErasing) {
        ctx.drawImage(canvas, e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop, 1, 1, e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop, 1, 1);
    } else {
        ctx.fillStyle = "blue";
        ctx.fillRect(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop, 10, 10);
    }
};
</script>

</body>
</html>

尝试一下 »

在这个示例中，我们首先创建了一个带有蓝色矩形的Canvas。然后，我们设置三个事件处理器：当鼠标按下时，开始橡皮擦模式；当鼠标松开时，结束橡皮擦模式；当鼠标移动时，如果处于橡皮擦模式，则进行橡皮擦操作。在橡皮擦模式下，我们设置globalCompositeOperation为"destination-out"，这样在画布上画出的任何东西都会被视为透明，从而实现橡皮擦效果。

上一篇：Canvas如何绘制扇形？

下一篇：如何使用Canvas绘制爱心？