HTML5多画布在单页上 [英] HTML5 multiple canvas on a single page

问题描述

如果我们在单个html页面上使用多个< canvas> ，则会妨碍正在开发的应用程序的性能，代码会变得非常庞大，更多时间加载网页？

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?

推荐答案

假设您正在制作一个在屏幕上有项目并允许用户绘制选择框的程序。

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.

其他时候，您可能想要更改非常少的背景和前景对象随时更改。而不是以每秒60帧的速度重绘所有这些，您可以制作一个背景画布和前景画布，并且只有前台的对象以高速重绘。在这里，两个画布应该比一个更有效，但它可能更适合缓存的背景画布作为一个图像，并在每一帧绘制图像。

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.

这篇关于HTML5多画布在单页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！