Canvas裁切应用示例：橡皮擦

图形开发canvashtml5

在图形编辑或绘图应用中，橡皮擦功能允许用户擦除画布上的部分内容，而Canvas的裁切功能结合绘图操作，可以巧妙地模拟出这一效果。

橡皮擦效果概述

橡皮擦效果并不是真的在Canvas上“删除”像素，因为Canvas一旦绘制完成，其内容就是不可变的（除非使用clearRect等方法清除整个区域或部分区域）。但是，我们可以通过在橡皮擦移动时，使用裁切功能来限制绘图操作的范围，并结合透明色或背景色来“覆盖”原有的图像内容，从而达到擦除的视觉效果。

以下是一个HTML文件的示例，展示了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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <title>画布操作(clip)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="Jackey Hoo">
    <meta name="keywords" content="canvas,anygraph,javascript">
    <script src="../js/helper.js"></script>
</head>

<body style="margin:10px;">
    <canvas id="canvas" width="800" height="533" style="border:solid 1px #CCCCCC;"></canvas>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    let beginDrag = false;
    let ready = false;   

    // 绘制图像
    let image = new Image();
    image.onload = function () {
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        drawGrid('lightgray', 0, 0, ctx);
    }
    image.src = "../images/bokeh-1123787_640.webp";

    // 鼠标键按下事件
    canvas.addEventListener('mousedown', function (e) {
        beginDrag = true;
    }, false);
    // 鼠标键抬起事件
    canvas.addEventListener('mouseup', function (e) {
        beginDrag = false;
    }, false);
    // 增加鼠标移动事件
    canvas.addEventListener('mousemove', function (e) {
        // 当鼠标键按下时，移动鼠标箭头，即可擦除覆盖物
        if (beginDrag === true) {
            erase(e.offsetX, e.offsetY, false);
        }
    }, false);

    // 橡皮檫功能实现
    function erase(x, y) {
        ctx.save();
        // 建立裁切区域
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, 2 * Math.PI);
        ctx.clip();

        // 在裁切区域绘制圆形(擦除)
        ctx.fillStyle = "#FFFFFF55"
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.restore();
    }
</script>

</html>

在这个示例中，当用户按下并拖动鼠标左键时，会擦除鼠标周围圆形区域内的内容。绘制方法如下：使用 addEventListener()方法监听鼠标的按下、抬起和移动事件，在鼠标按下时记录状态。当鼠标移动且处于按下状态时，执行橡皮擦功能。在橡皮擦功能函数内部，先保存画布状态，然后以鼠标位置为中心绘制圆形裁切区域，并绘制覆盖原图像的矩形模拟擦除效果。最后，恢复画布状态实现动态橡皮擦效果。

上一篇：网页中的图像映射是什么，它是如何工作的？

下一篇：HTML中字符集之间的差异有哪些？