我如何加快这个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绘画应用程序？

回答

相关问题