Html 单个页面上的 HTML5 多画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4020910/
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
HTML5 multiple canvas on a single page
提问by Nitesh
If we use multiple <canvas>on a single html page does it hamper the performance of the application that is being developed and does the code get very bulky and require more time to load the page?
如果我们<canvas>在单个 html 页面上使用多个，是否会妨碍正在开发的应用程序的性能，并且代码是否变得非常庞大并需要更多时间来加载页面？
回答by Simon Sarris
Sometimesmultiple canvases results in better performance. It's best to test if you can afford the time.
有时多个画布会产生更好的性能。最好测试一下你是否有时间。
Say you are making a program that has items on the screen and allows the user to draw a selection box.
假设您正在制作一个在屏幕上显示项目并允许用户绘制选择框的程序。
With one canvas, to draw the selection box you'd have to redraw all of the elements over and over to update the selection box that the user sees since they are all on the same canvas.
使用一个画布，要绘制选择框，您必须一遍又一遍地重绘所有元素以更新用户看到的选择框，因为它们都在同一画布上。
Or, you can have two canvases, one with the objects and then another one in front for things like "tools" (like the selection box graphics). Here two canvases may be more efficient.
或者，您可以有两个画布，一个是对象，另一个是用于诸如“工具”之类的东西（如选择框图形）。这里两个画布可能更有效。
Other times you may want to have a background that changes very rarely and foreground objects that change all the time. Instead of redrawing all of them at 60 frames per second, you make a background canvas and foreground canvas, and only have the foreground's objects redraw at the fast speed. Here two canvases ought to be more efficient than one, but it may be more optimal to "cache" that background canvas as an image and drawing the image first each frame.
其他时候，您可能想要一个很少变化的背景和一直变化的前景对象。不是以每秒 60 帧的速度重绘所有对象，而是制作背景画布和前景画布，并且只让前景对象以较快的速度重绘。这里两个画布应该比一个更有效，但将背景画布“缓存”为图像并在每一帧首先绘制图像可能更理想。
回答by Brad Mace
I've used dozens of canvases on the same page display different graphs using a javascript graphing library. The graphs are quite fast, it's gathering the data for them that's a bit slow in our case.
我在同一页面上使用了数十个画布，使用 javascript 图形库显示不同的图形。图表非常快，在我们的案例中为它们收集数据有点慢。
If you want you can wait to do all your drawing until the rest of the page loads by kicking it off from the onLoadfunction.
如果您愿意，您可以等待完成所有绘图，直到页面的其余部分通过从onLoad函数中启动它来加载。
回答by b-ryan ca
According to Mark Pilgrim, it's a good idea to use multiple canvases.
根据 Mark Pilgrim 的说法，使用多个画布是个好主意。
See This Link
看到这个链接
Using multiple canvases can simplify things on your end, by isolating regions of the screen to update and isolating input events. If your page is well-suited for dividing-up regions of the screen, I say go for it.
通过隔离屏幕区域以更新和隔离输入事件，使用多个画布可以简化您的工作。如果您的页面非常适合划分屏幕区域，我会说去吧。
回答by shaman.sir
Also, HTML5Rocks saysit is a best approach.
此外，HTML5Rocks 表示这是最好的方法。
回答by Myra
A single instance runs smoothly, more does not affect rendering on page. Data is the factor of slowing canvas down. In order to increase page loading time, you can simply call canvas rendering methods after page loading.
单个实例运行流畅，多个不影响页面渲染。数据是减慢画布速度的因素。为了增加页面加载时间，您可以在页面加载后简单地调用画布渲染方法。
