html如何清理画布 - 云主机网

要清理HTML画布，可以使用JavaScript的clearRect()方法。该方法接受四个参数：x、y、width和height，分别表示矩形的左上角坐标和宽度、高度。

HTML如何清理画布

html如何清理画布

单元1：清除画布内容

在HTML中，可以使用JavaScript来清除画布的内容，以下是使用clearRect()方法清除画布内容的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Clear Canvas</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // 绘制一些图形或文本到画布上
    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 100);
    ctx.font = "20px Arial";
    ctx.fillText("Hello World", 10, 100);
    // 清除画布内容
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  </script>
</body>
</html>

在上面的示例中，我们首先创建了一个带有ID为"myCanvas"的画布元素，通过JavaScript获取该画布的上下文对象（ctx），并使用fillRect()和fillText()方法绘制了一些图形和文本，使用clearRect()方法清除了整个画布的内容。

单元2：重置画布状态

除了清除画布内容外，有时还需要重置画布的状态，例如清空路径、重置变换矩阵等，以下是一个示例代码，演示了如何重置画布状态：

<!DOCTYPE html>
<html>
<head>
  <title>Reset Canvas</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // 绘制一些图形或文本到画布上
    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 100);
    ctx.font = "20px Arial";
    ctx.fillText("Hello World", 10, 100);
    // 重置画布状态
    ctx.beginPath(); // 清空当前路径
    ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置变换矩阵为单位矩阵
  </script>
</body>
</html>

在上面的示例中，我们首先创建了一个带有ID为"myCanvas"的画布元素，通过JavaScript获取该画布的上下文对象（ctx），并使用fillRect()和fillText()方法绘制了一些图形和文本，接下来，使用beginPath()方法清空当前路径，使用setTransform()方法将变换矩阵重置为单位矩阵，从而重置了画布的状态。