我如何加快這個JavaScript繪畫應用程序？

好吧，我已經構建了一個繪圖應用程序，它包含一個使用HTML畫布的繪畫工具。油漆桶的問題在於，儘管我儘可能提高了效率，但需要很長時間才能做出響應。這是瀏覽器沒有得到足夠處理能力的問題嗎？ Javascript是否很慢？畫布是否緩慢？我如何加快這個JavaScript繪畫應用程序？

對於像這樣的處理器密集型功能，Java會是最好的選擇嗎？或者也許閃光？

好的，這裏有一些代碼。頂部（換行符之前）運行，然後換行符下面的部分運行四次，光標每個方向一個。（左，上，右，下）顯示的一個顯然是左邊一個像素。

if (typeof paintPos[x] === 'undefined') { 
    paintPos[x] = {}; 
} 
paintPos[x][y] = x+'|'+y; 

var runRecurse = 0; 
if (typeof paintPos[x-1] === 'undefined') { 
    runRecurse = 1; 
} else if (typeof paintPos[x-1][y] === 'undefined') { 
    runRecurse = 1; 
} 
if (runRecurse === 1) { 
    if (x-1 >= 0) { 
     var colData = ctx.getImageData(x-1, y, 1, 1).data; 
     var colHexNew = "#" + ("000000" + 
      rgbToHex(colData[0],colData[1],colData[2])).slice(-6); 
     if (colHex === colHexNew) { 
      setPaintPos(x-1,y,colHex); 
     } 
    } 
}

然後，爲了真正在作畫，我只是這樣做：

$.each(paintPos,function(key,value) { 
    $.each(paintPos[key],function(key2,value2) { 
     var paintCol = value2.split('|'); 
     var paintX = paintCol[0]; 
     var paintY = paintCol[1]; 
     ctx.fillRect(paintX,paintY,1,1); 
    }); 
});

來源

2013-11-15 J S

答：也許。告訴我們你的代碼。 – SLaks

沒有代碼，你的問題過於主觀，可能會引發爭論。現在好多了。 –

您正在執行像素級操作。繪製微小的1像素矩形可能不是最有效的方法。

HTML5的Canvas提供通過getImageData功能訪問您的畫布的像素。該函數返回字節[]緩衝區的畫布區域的像素數據（每個像素4個字節，格式爲rgba）。

然後可以廉價地操縱該字節[]的像素。

建立你的照片後，你可以用putImageData提取數據返回到畫布上。

本教程似乎很不錯：http://creativejs.com/2011/12/day-3-play-with-your-pixels/

來源

2013-11-15 19:40:39

感謝您的幫助。 –

沒有更多的細節，不可能說問題是否處理能力。您可能會遇到系統限制，或者您的代碼可能包含許多可能的低效率之一。

雖然一般來說，處理器負載是處理器負載。因此，將JavaScript代碼重寫爲Java不會加速您的應用程序本身。

你就可以使用Java（和其他編程語言）做的是使用多線程代碼，這將使您的應用程序時，可能使用不同的處理器內核同時執行不同的代碼部分。

使用多線程，你將能夠保持你的應用程序響應，而它正在執行繁重的處理/計算。

的Javascript真的不重應用，比如你顯然開發的一個準備。首先，許多瀏覽器會詢問用戶是否想在你的代碼需要幾秒鐘執行時禁用JavaScript。

來源

2013-11-15 19:24:24 Luke

我如何加快這個JavaScript繪畫應用程序？

回答

相關問題