HTML5畫布上的設計 - 如何加速渲染

所以我覺得在HTML5畫布上渲染設計會很快。我使用下面的代碼，我認爲這將需要不到一秒的渲染，但總共需要大約2分鐘。HTML5畫布上的設計 - 如何加速渲染

代碼：

<script> 
var canvas = document.getElementById("canvas") 
    ctx = canvas.getContext('2d') 
    maxW = window.innerWidth 
    maxH = window.innerHeight 
    x = -1 
    numLeft = 15 

//maxW = 300 
//maxH = 300 
canvas.setAttribute("width", maxW) 
canvas.setAttribute("height", maxH) 
ctx.fillStyle = "rgba(0,0,0,.5)" 

for(var j = 0; j < maxH; j++){ 
    for(var i = 0; i < maxW; i++){ 
    if(numLeft < 0){ 
     if(x == -1){ 
     ctx.fillStyle = "rgba(127,127,127,.5)" 
     //numLeft += 12 
     numLeft += 5 
     } 
     else{ 
     ctx.fillStyle = "rgba(0,0,0,.5)" 
     //numLeft += 24 
     numLeft += 15 
     } 
     x *= -1 
    } 
    ctx.fillRect(i,j,i+1,j+1) 
    numLeft-- 
    } 
    //numLeft -= 5 this one's crazy :D 
    numLeft -= 3 
}

它應該吸取斜條紋的黑色和灰色。但是，再一次，渲染會耗盡大部分人的瀏覽器。任何提示如何加快這一點？

來源

2012-01-01 Feng Huo

我不知道你是否願意，但'drawRect（x，y，1，1）'填充一個像素 - 它是'（x，y，w，h）'。由於您正在繪製更多像素（寬度爲「i + 1」和高度爲「j + 1」，因此您繪製的像素數量以二次方式增長），因此這會提高速度。 – pimvdb 2012-01-01 01:21:58

同意，你可以看到這個jsFiddle的區別http://jsfiddle.net/luisperezphd/eY82y/ – 2012-01-01 01:34:53

由於評論無法被接受爲答案，據我所知，我發佈@ pimvdb評論作爲答案。問題是調用fillRect()的方式，它被稱爲好像所有參數都是座標(x, y, x2, y2)，實際上參數是座標和尺寸的組合(x, y, w, h)。

我確認這是您的代碼中的一個主要性能問題，與this jsFiddle。

如前所述，您可以進行其他性能改進，例如預渲染和使用線條漸變，但這解決了即時性能問題。在我的Chrome性能測試中，時間從6秒縮短到不到1秒。您是否試過performance suggests on html5rocks.com？

來源

2012-01-01 01:19:01

不是。他們是什麼？（這些建議，就是這樣。） – 2012-01-01 01:20:55

嘿@JaredFarrish這些改進與圖形編程的一般改進幾乎相同。例如，不是多次重複渲染同一個東西，而是將其渲染一次到它自己的畫布，然後多次將該畫布拖到目標畫布上。這實際上是一個可以用於解決這個問題的技術。還有其他類似的建議，比如一次發送所有繪圖命令 - 將它們分組。 – 2012-01-01 17:45:42

基於像素的操作幾乎都是昂貴的，因爲您必須通過每個像素並對其進行着色（1000×1000大小→1 000 000，一百萬像素!!!）。當你知道設計應該是什麼樣的時候，你應該總是找到優化性能的方法。您可以通過在畫布上填充較寬條紋的顏色，然後僅遍歷需要更改的像素（也請確保maxH和maxW是Canvas的大小而不是內部窗口的大小），從而改進您的示例。

更簡單快捷的方法是使用moveTo和lineTo命令實際繪製線條。

來源

2012-01-01 14:06:43 batzkoo

HTML5畫布上的設計 - 如何加速渲染

回答

相關問題