如何在html 5中销毁/重新加载canvas？

我正在开发一个电子书应用程序，我使用PDF.js在canvas上绘制每个页面，问题是，当我点击按钮并转到其他页面时，我尝试再次在同一个canvas上渲染，但canvas似乎移动了到错误的位置或错误的大小。

function renderPage(url) { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); //clearCanvasGrid('canvas'); PDFJS.getDocument(url).then(function (pdf) { // Using promise to fetch the page pdf.getPage(1).then(function(page) { var viewport = page.getViewport(5); //scale 5 canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: ctx, viewport: viewport }; page.render(renderContext).then(function() { initialZoomPage(viewport.height,viewport.width); }); }); }); } 

那么，在重绘页面之前是否需要执行任何必要的步骤？ 另外，如果我要关闭页面，我怎么能破坏它呢？ 谢谢

更新：

 function clearCanvasGrid(canvasID){ canvas = document.getElementById(canvasID); //because we are looping //each location has its own canvas ID context = canvas.getContext('2d'); //context.beginPath(); // Store the current transformation matrix context.save(); // Use the identity matrix while clearing the canvas context.setTransform(1, 0, 0, 1, 0, 0); context.clearRect(0, 0, canvas.width, canvas.height); // Restore the transform context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING } 

我发现了一个清除canvas的function但除了clearRect之外它还有.save，.setTransform和.restore，它们是否必要？ 谢谢

Answer 1

一种方法是使用context.clearRect(0,0, width, height)清除canvas（参考） 。

或者，您可以在每次需要新页面时附加新的canvas元素（并可能删除旧的canvas元素，具体取决于您是否要再次显示它）。 这样的事情应该这样做：

 var oldcanv = document.getElementById('canvas'); document.removeChild(oldcanv) var canv = document.createElement('canvas'); canv.id = 'canvas'; document.body.appendChild(canv); 

请注意，如果您计划保留多个，则每个人必须拥有唯一的id而不仅仅是id="canvas" （可能基于页码 – 类似canvas-1 ）。

---

回答更新的问题 ：

只有在您（或以某种方式允许用户进行）转换时，才需要save ， setTransform和restore 。 我不知道PDF.js库是否在幕后进行任何转换，因此最好将其保留在那里。

Answer 2

尝试使用clearRect（） ，如：

 canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height);