HTML 在HTML5画布上擦除之前绘制的线条

在本文中，我们将介绍如何在HTML5画布上擦除之前绘制的线条。HTML5提供了一个强大的画布元素，可以使用JavaScript在其中绘制各种图形和图像。然而，有时候我们需要擦除画布上的一部分，以便重新绘制或清除之前绘制的内容。下面将介绍几种方法来实现这一目的。

阅读更多：HTML 教程

方法一：使用clearRect方法擦除

HTML5提供了一个用于擦除画布上矩形区域的方法——clearRect。该方法接受四个参数：开始擦除的矩形区域的左上角的x坐标、左上角的y坐标、矩形的宽度和高度。以下是一个示例：

<canvas id="myCanvas" width="500" height="300"></canvas>

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

    // 绘制一个矩形
    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 200, 100);

    // 擦除矩形的一部分
    ctx.clearRect(100, 75, 50, 25);
</script>

在上面的示例中，我们首先创建一个画布元素，并获取它的2D绘图上下文。然后，我们使用fillRect方法在画布上绘制一个红色的矩形。最后，我们使用clearRect方法擦除了该矩形的一部分。

方法二：使用globalCompositeOperation属性擦除

除了使用clearRect方法外，还可以使用globalCompositeOperation属性来实现擦除效果。该属性可以设置为”destination-out”，表示绘制的内容将擦除相交的已有内容。以下是一个示例：

<canvas id="myCanvas" width="500" height="300"></canvas>

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

    // 绘制一个矩形
    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 200, 100);

    // 切换绘图模式为destination-out
    ctx.globalCompositeOperation = "destination-out";

    // 绘制一个与矩形相交的矩形
    ctx.fillStyle = "blue";
    ctx.fillRect(100, 75, 100, 50);
</script>

在上面的示例中，我们首先创建一个画布元素，并获取它的2D绘图上下文。然后，我们使用fillRect方法在画布上绘制一个红色的矩形。接着，我们将绘图模式切换为”destination-out”，表示绘制的内容将擦除已有内容。最后，我们绘制了一个与之前矩形相交的蓝色矩形，结果是蓝色矩形部分被擦除，显示出红色矩形的一部分。

方法三：使用绘图状态的保存和恢复

除了上述两种方法外，还可以使用绘图状态的保存和恢复来擦除之前绘制的线条。通过在绘制之前保存当前绘图状态，然后再将其恢复，我们可以达到擦除的效果。以下是一个示例：

<canvas id="myCanvas" width="500" height="300"></canvas>

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

    // 绘制一条线
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 200);
    ctx.strokeStyle = "black";
    ctx.stroke();

    // 保存当前绘图状态
    ctx.save();

    // 擦除线条
    ctx.clearRect(50, 50, 200, 200);

    // 恢复之前的绘图状态
    ctx.restore();

    // 绘制一条新的线
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(250, 250);
    ctx.strokeStyle = "red";
    ctx.stroke();
</script>

在上面的示例中，我们首先创建一个画布元素，并获取它的2D绘图上下文。然后，我们使用beginPath、moveTo和lineTo方法绘制了一条黑色的线条。接着，我们保存了当前的绘图状态，并使用clearRect方法擦除了之前绘制的线条。最后，我们恢复了之前保存的绘图状态，并绘制了一条红色的新线条。