如何使用canvas元素來利用加速圖形

我有html頁面，我使用通用處理程序來獲取我的img控件的字節數組。如何使用canvas元素來利用加速圖形

我最近轉移到使用畫布元素。

將圖像加載到隱藏的img變量中後，我已將圖像加載到畫布中。

我想盡快刷新/更改此圖像。

我已經讀過，畫布利用硬件加速圖形。

這是由canvas元素自動處理的嗎？我是否需要添加任何附加代碼？

我需要特定的顯卡還是下載到安裝的顯卡驅動程序？

這是我到目前爲止的代碼：

我調用返回

context.Response.BinaryWrite(data);

這將圖像加載到一個圖像變量

var myIMG= new Image();

通用處理器ashx的頁面，並當它有點擊它在畫布上繪製的圖像變量的onload事件：

var c1 = document.getElementById("live1x4"); 
    var ctx1 = c1.getContext("2d"); 
    c1.setAttribute('width', '360'); 
    c1.setAttribute('height', '288'); 
    img1x4.onload = function() { 
     ctx1.drawImage(img1x4, 0, 0); 
    }; 
    img1x4.onerror = function() { 
     $("#divMode5").html('error#1'); 
    };

來源

2014-04-14 Andrew Simpson

Html5 Canvas可以自動使用任何現有的GPU來加速圖形。

只要確保您安裝了最新的瀏覽器（一些舊的瀏覽器不使用GPU）。

如果您只是在畫布上繪製離屏img元素，那就是GPU加速。

context.drawImage(myImageElement,0,0);

我看到你正在使用一個字節數組。因此，我應該提到.getImageData和.putImageData不使用GPU進行加速。

來源

2014-04-14 17:24:31 markE

嗨，感謝發佈。你已經回答了我的要點。我剛剛添加了我使用的代碼。我很擔心，因爲我正在使用一個圖像變量，我失去了使用canvas元素獲得的任何性能增益。你知道嗎？謝謝 –

我猜myIMG＆img1x4是一樣的嗎？如果是這樣，那麼你的drawImage是GPU加速的。順便說一句，你可以做這個快捷方式來設置畫布寬度/高度：c1.width = 360; c2.height = 288;祝你的項目好運！ – markE

是的，謝謝你，謝謝你，謝謝你！ –

如何使用canvas元素來利用加速圖形

回答

相關問題