如何清除画布以进行重绘-之路教程

Canvas 元素

所有主要浏览器的版本都支持 canvas 元素。
canvas 元素只有两个属性：宽度和高度。
默认大小为 300 px × 150 px（宽 × 高）。
但是自定义尺寸是使用 CSS height 和 width 属性定义的。

要在画布上绘制图形，我们应该使用动态创建图形的 JavaScript 上下文对象。
Canvas 提供了多种绘制路径、圆、框、文本和添加图像的方法。

如何清除画布以进行重绘

<canvas> 元素可通过 JavaScript 动态绘制图形。

它只是一个图形的容器，绘制图形需要JavaScript。
在本教程中，我们将学习清除画布以重绘其他图像的注意事项。

<!DOCTYPE HTML>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <canvas id="canvasId" width="500" height="200"></canvas>
    <script>
      let canvas = document.getElementById('canvasId');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 90, 120, 160, 240, 160);
      context.bezierCurveTo(260, 190, 300, 170, 350, 150);
      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);
      //complete custom shape
      context.closePath();
      context.lineWidth = 7;
      context.strokeStyle = 'green';
      context.stroke();
    </script>
  </body>
</html>

要清除画布，我们可以使用 clearRect() 方法。

这种方法在清除画布方面比其他方法表现得更好（例如重置宽度/高度，破坏画布元素然后重新创建它等。
）

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

不要将宽度设置为自身以清除画布： canvas.width = canvas.width;

重置 canvas.width 将重置所有画布状态，例如转换、lineWidth、strokeStyle。

<!DOCTYPE HTML>
<html>
  <head>
    <title>文档的标题</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="myCanvas" width="500" height="200"></canvas>
    <div id="button">
      <input type="button" id="clear" value="Clear">
    </div>
    <script>
      let canvas = document.getElementById('myCanvas');
      let context = canvas.getContext('2d');
      //begin custom shape
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 90, 120, 160, 240, 160);
      context.bezierCurveTo(260, 190, 300, 170, 350, 150);
      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);
      //complete custom shape
      context.closePath();
      context.lineWidth = 7;
      context.strokeStyle = 'green';
      context.stroke();
      //bind event handler to clear button
      document.getElementById('clear').addEventListener('click', function() {
          context.clearRect(0, 0, canvas.width, canvas.height);
        }, false);
    </script>
  </body>
</html>

日期：2020-06-02 22:16:11 来源：oir作者：oir

←JavaScript 如何清除本地存储

如何在 JavaScript 中克隆日期对象→

Canvas 元素

目录