通过 JavaScript 清除 canvas

Question

我正在使用这个jQuery 插件在 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 的 state 保存为 blob。 例如，作为图像/png。 这里有两个不好的地方：

1. 一个小小的不便。 将 blob 转换为图像并返回的方法是异步的。 必须使用承诺。

2. 速度。 我强烈怀疑这个解决方案是否适合需要速度的任务——游戏、视频等。

 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时它将通过整个列表 go 并再次绘制完整的东西。 （这样可以避免笔划中出现漏洞）。
文档很难掌握，但您可以通过.sketch("options", value)方法设置此options的内容。

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

 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>