通过 JavaScript 清除 canvas

Question

我正在使用这个 jQuery plugin 在 canvas 上自由绘图。
我想清除 canvas 以重绘，但在我这样做之后，当我在内部单击 canvas 以重绘时，我清除的旧绘图再次出现

$('#canvasFirst').sketch();
$('button').on("click", (evt) => {
  var canvas = document.getElementById('canvasFirst');
  let context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
});

canvas { border: 1px solid; vertical-align: top }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js"></script>
<p>Draw on the below canvas, then press "clear" and try to draw again.</p>

<canvas id="canvasFirst">
</canvas>
<button>clear</button>

Answer 1

您可以尝试将 canvas 的状态保存为 blob。例如，如 image/png。这里有两个不好的地方：

小小的不便。将 blob 转换为图像并返回的方法是异步的。必须使用承诺。
速度。我强烈怀疑这个解决方案是否适合需要速度的任务——游戏、视频等

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const saveCanvasState = (canvas) => {
  const ctx = canvas.getContext('2d');
  ctx.save(); // save state
  let blob;

  return new Promise((r) => {
    canvas.toBlob( // toBlob is async method
      (b) => {
        blob = b;

        r(() =>
          new Promise((r) => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.restore();

            const img = new Image();

            img.addEventListener('load', () => {
              URL.revokeObjectURL(img.src);
              ctx.drawImage(img, 0, 0);
              r();
            });

            img.src = URL.createObjectURL(blob);
          }));
      },
      'image/png',
      1
    );
  });
};

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

saveCanvasState(canvas).then((restore) => {
  ctx.fillStyle = 'black';
  ctx.fillRect(150, 40, 100, 100);
  ctx.fillRect(100, 40, 100, 100);

  restore().then(() => {
    console.log('restored, can draw');
  });
});

<canvas id="canvas"></canvas>

Answer 2

此插件将所有绘图命令存储在一个 actions 数组中，并且在每个 redraw 处它将遍历整个列表并再次绘制完整的东西。（这样可以避免笔划中出现漏洞）。
The docs很难掌握，但是你可以通过.sketch("options", value)方法设置这个options的内容。

正如this issue中所暗示的那样，将其设置为空数组将删除所有先前的命令。你所要做的就是重新绘制整个场景，现在是空的：

const $canvas = $('#canvasFirst');
$canvas.sketch();
$('button').on("click", (evt) => {
  $canvas.sketch("actions", []);
  $canvas.sketch("redraw");
});

canvas { border: 1px solid; vertical-align: top }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js"></script>
<p>Draw on the below canvas, then press "clear" and try to draw again.</p>

<canvas id="canvasFirst">
</canvas>
<button>clear</button>

通过 JavaScript 清除 canvas

Clear canvas by JavaScript

javascript

html

html5-canvas