jQuery 如何在 html 5 中销毁/重新加载画布？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18456160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to destroy / reload the canvas in html 5?
提问by user782104
I am working on an ebook application, I draw each page on canvas using PDF.js , the problem is , when I click on the button and turn to other page, I tried simply render on the same canvas again , but the canvas seems move to a wrong location or wrong size .
我正在开发一个电子书应用程序，我使用 PDF.js 在画布上绘制每个页面，问题是，当我单击按钮并转到其他页面时，我尝试再次在同一画布上进行渲染，但画布似乎在移动到错误的位置或错误的大小。
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);
});
});
});
}
So, are there any necessary step I need to do before redraw the page? Also , how can I destroy it if I would like to close the page? Thanks
那么，在重绘页面之前我需要做什么必要的步骤吗？另外，如果我想关闭页面，我该如何销毁它？谢谢
Update:
更新：
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
}
I found a function to clear the canvas but it has .save , .setTransform and .restore besides clearRect, are they necessary? thanks
我找到了一个清除画布的函数，但它除了 clearRect 之外还有 .save 、 .setTransform 和 .restore ，它们是必需的吗？谢谢
回答by Moshe Katz
One way is to clear out the canvas using context.clearRect(0,0, width, height)(Reference).
一种方法是使用context.clearRect(0,0, width, height)(Reference)清除画布。
Alternatively, you can append a new canvas element (and possibly remove the old one, depending on whether you will want to display it again) each time you want a new page. Something like this should do it:
或者，您可以在每次需要一个新页面时附加一个新的画布元素（并可能删除旧的，取决于您是否想要再次显示它）。像这样的事情应该这样做：
var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)
var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);
Just note that if you plan to keep more than one, each one must have a unique idinstead of just id="canvas"(perhaps based on the page number - something like canvas-1).
请注意，如果您打算保留多个，则每个都必须具有唯一的id而不是唯一的id="canvas"（可能基于页码 - 类似canvas-1）。
Answer to updated question:
回答更新的问题：
The save, setTransform, and restoreare only necessary if you are doing (or somehow allowing users to do) transformation. I don't know if the PDF.js library does any transformation behind the scenes, so it may be best to leave it there.
的save，setTransform以及restore是只需要如果你正在做（或在某种程度上允许用户做）的转变。我不知道 PDF.js 库是否在幕后进行了任何转换，因此最好将其留在那里。
回答by Sudhir Bastakoti
try using clearRect(), like:
尝试使用clearRect()，例如：
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
