在 JavaScript 中清除 canvas 画布

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中清除 canvas 画布

作者：迹忆客最近更新：2023/06/02 浏览次数：

我们使用 canvas 来绘制图形。它提供了多种绘制的方法，如圆形、方框、文字、添加图片等，我们在使用canvas时需要清除它并在上面绘制。

本文介绍如何在 JavaScript 中清除画布。

在 JavaScript 中清除画布

canvas 元素帮助我们借助 JavaScript 绘制图形。画布只是图形的容器，它需要JavaScript来绘制图形。

我们可以使用 JavaScript 的 clearRect() 方法清除画布。所有浏览器都支持 canvas 元素。

它只有两个属性：宽度和高度。我们可以使用 CSS 的 width 和 height 属性来自定义画布的大小。

我们使用在画布上创建图形的 JavaScript 上下文对象。

在 HTML 中使用 JavaScript 创建画布

在下面的示例中，我们将创建一个具有特定颜色和大小的画布。

我们使用了带有 id canvsId 的画布标签，并为画布的宽度和高度提供了自定义大小。我们使用了一个创建红色画布的脚本，如输出所示。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Creating a canvas</title>
  </head>
  <body>
    <canvas id="canvsId" width="680" height="420"></canvas>
    <script>
      let canvas = document.getElementById('canvsId');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 80, 110, 170, 250, 170);
      context.bezierCurveTo(260, 190, 300, 160, 370, 140);
      context.bezierCurveTo(410, 140, 440, 130, 380, 110);
      context.bezierCurveTo(440, 50, 350, 40, 350, 50);
      context.bezierCurveTo(310, 10, 270, 30, 240, 40);
      context.bezierCurveTo(310, 10, 130, 15, 180, 90);
      context.closePath();
      context.lineWidth = 8;
      context.strokeStyle = 'red';
      context.stroke();
    </script>
  </body>
</html>

输出:

使用 JavaScript 创建的画布

如果我们想清除我们创建的这个画布，我们将在 JavaScript 中使用 clearRect() 。此代码将添加到上面的示例代码中。

代码：

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

在下一个示例中，我们使用上面的代码来清除画布。我们还创建了一个名为 clear 的按钮，并为其分配了一个函数，单击该按钮将清除画布。

当我们运行代码并单击清除按钮时，我们创建的画布将被清除。

完整代码：

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #button {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #button input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body data-rsssl=1>
    <canvas id="myCanvs" width="680" height="420"></canvas>
    <div id="button">
      <input type="button" id="clear" value="Clear">
    </div>
    <script>
      let canvas = document.getElementById('myCanvs');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 80, 110, 170, 250, 170);
      context.bezierCurveTo(260, 190, 300, 160, 370, 140);
      context.bezierCurveTo(410, 140, 440, 130, 380, 110);
      context.bezierCurveTo(440, 50, 350, 40, 350, 50);
      context.bezierCurveTo(310, 10, 270, 30, 240, 40);
      context.bezierCurveTo(310, 10, 130, 15, 180, 90);
      context.closePath();
      context.lineWidth = 8;
      context.strokeStyle = 'red';
      context.stroke();
      document.getElementById('clear').addEventListener('click', function() {
          context.clearRect(0, 0, canvas.width, canvas.height);
        }, false);
    </script>
  </body>
</html>