如何在html 5中销毁/重新加载画布? [英] How to destroy / reload the canvas in html 5?
问题描述
我正在开发一个电子书应用程序,我使用PDF.js在画布上绘制每个页面,问题是,当我点击按钮并转到其他页面时,我尝试再次在同一个画布上渲染,但是画布似乎移动到错误的位置或错误的大小。
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 .
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
更新:
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
}
我找到了一个清除功能画布但除了clearRect之外它还有.save,.setTransform和.restore,它们是否必要?谢谢
I found a function to clear the canvas but it has .save , .setTransform and .restore besides clearRect, are they necessary? thanks
推荐答案
一种方法是使用 context.clearRect(0,0,width,height)
(参考)。
One way is to clear out the canvas using context.clearRect(0,0, width, height)
(Reference).
或者,您可以在每次需要新页面时附加一个新的canvas元素(并可能删除旧的canvas元素,具体取决于您是否要再次显示它)。这样的事情应该这样做:
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);
请注意,如果您计划保留多个,则每个人必须拥有唯一的 id
而不只是 id =canvas
(可能基于页码 - 类似 canvas- 1
)。
Just note that if you plan to keep more than one, each one must have a unique id
instead of just id="canvas"
(perhaps based on the page number - something like canvas-1
).
回答更新的问题:
保存
, setTransform
和 restore
。我不知道PDF.js库是否在幕后进行任何转换,所以最好将它留在那里。
The save
, setTransform
, and restore
are 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.
这篇关于如何在html 5中销毁/重新加载画布?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!