Question

好吧，我已经构建了一个包含使用HTML画布的油漆桶工具的绘图应用程序。油漆桶的问题在于，即使我尽可能高效，但需要很长时间才能做出响应。这是浏览器没有给予足够处理能力的问题吗？ 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);
    });
});

Answer 1

您正在执行像素级操作。绘制微小的1像素矩形可能不是最有效的方法。

HTML5 Canvas通过getImageData功能提供对画布像素的访问。此函数返回byte []缓冲区，其中包含画布区域的像素数据（每像素4个字节，格式为rgba）。

然后你可以廉价地操纵那个字节[]中的像素。

在构建完图片之后，您可以使用putImageData将数据绘制回画布。

本教程看起来非常不错：http://creativejs.com/2011/12/day-3-play-with-your-pixels/

Answer 2

如果没有更多具体细节，就无法确定问题是否是处理能力。您可能遇到系统限制，或者您的代码可能只包含许多可能的低效率之一。

一般来说，处理器负载是处理器负载。因此，将Javascript代码重写为Java本身并不会加速您的应用程序。

使用Java（和其他编程语言）可以做的是使用多线程代码，这将允许您的应用程序在可能的情况下使用不同的处理器内核同时执行不同的代码部分。

使用多个线程，您可以使应用程序保持响应，同时执行繁重的处理/计算。

Javascript确实没有为像您显然开发的重型应用程序做好准备。例如，许多浏览器会询问用户是否要在代码执行时间超过几秒时禁用Javascript。

如何加速这个JavaScript绘画应用程序？

2 个答案: