簡體   English   中英

多個html5 canvas元素:性能問題?

[英]Multiple html5 canvas elements: performance issue?

無論javascript如何,為了顯示畫布制圖標而添加多個html5畫布元素是否存在性能問題? 我的意思是div和canvas sematic元素之間在性能上有區別嗎?

我試圖遠離圖像,svg甚至fontawesome,這就是為什么我要求。

根據請求,我有這個簡短的代碼:

 var canvas = document.createElement("canvas"); canvas.width = 250; canvas.height = 80; var ctx = canvas.getContext("2d"); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, 250, 80); //draw a red box ctx.fillStyle = "#FF0000"; ctx.font = "30px Tahoma"; ctx.fillText("Hello World", 45, 50); var dataURL = canvas.toDataURL(); document.getElementById("img-data").innerHTML = dataURL; document.getElementById("canvas-mirror").src = dataURL; 
 <div id="img-data"></div> <img id="canvas-mirror"></div> 

簡而言之,

  1. 使用javascript創建canvas元素。 你不必將它包含在html中,為什么會這樣? 這樣它可能會快一點。
  2. 使用canvas.getContext 2d,WebGL或任何你想做的事情。 這是必不可少的,一旦你選擇方法,你不應該改變它! (不要在同一個畫布上使用它兩次。)
  3. 畫任何你想要的東西。
  4. 從畫布中獲取數據。 現在最着名的方法是使用“高級”方法toDataUrl。 這很好,很容易做到。 但是在更復雜的應用程序的情況下,你可能也會選擇不同的方法,例如webgl有readPixels更快,就像真的很快,你得到的數據更小,你也可以使用剪刀,但它也更難編碼。
  5. 使用圖像數據。 對於base64,它是img src屬性的有效參數。 必須首先轉換WebGL readPixels。 它可能是二進制blob或base64。

是,

性能取決於所有畫布的總面積,盡量保持它(畫布的總面積)小。

如果您打算使用canvas然后嘗試使用裁剪選項,它將提高性能。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM