HTML 5頁面上的多個畫布元素

Question

我可以在HTML 5頁面上擁有多個畫布，並且每個畫布上都有一個圖像。我基本上需要在我的應用程序的所有圖像上使用JS manipulation Plugin，並且此插件需要將圖像放在畫布上。

在他們內部會有多個畫布和圖像，會影響或減慢頁面的性能？

Answer 1

是的，你可以有多個畫布元素。您的網頁的效果不會因爲有多個畫布而受到影響。什麼會影響你的表現是畫布的重畫。至於圖片將決定的性能是多少重繪必須完成。

你可以讀到更多在：HTML5 multiple canvas on a single page

Answer 2

Canvas元素是非常快的重新劃分。它比SVG快得多，這使得它成爲Web開發的繪圖工具非常有效。

您可以根據需要使用盡可能多的畫布，並且不應該對您的頁面性能產生負面影響。

此外，畫布元素在整個頁面中加載，但加載圖像，並繪製到畫布通常是後執行頁面完全加載，可以減緩你的頁面的表現代碼，所以唯一的事情是你在不同的畫布元素中做的事情，而不是你在頁面中使用的那些元素的數量。另外，如果您在頁面加載後開始繪製，無論您在畫布元素上做什麼，因爲當您開始繪製頁面時，頁面將被完全加載。

請記住，JavaScript用於繪製到畫布上。如果您使用繁重的流程來繪製圖紙，則可以發現一個畫布圖形會阻止另一個畫圖直到完成。嘗試用更少的阻止方式來構建您的繪圖代碼，以避免這種情況。