通過 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>