Question

我正在创建一段特定的代码，该代码在每一列上从左到右渲染像素，并且我编写了一些效果很好的代码，但是渲染一个小的（230px x 170px）图像大约需要15秒。这段代码正在做的事情是遍历我创建的文件格式，每个与下一个相距一个数字的值都会使像素紧接前一个像素，而两个相距的数字都将跳至下一行并再次开始渲染像素。是否有任何提示和技巧可以提高当前代码的速度，或者如何以相似的方法呈现它，但是呈现图像时执行方法不同？如有任何问题，请随时发表评论，因为此帖子在交付过程中可能非常混乱。预先感谢。

//The 'Numbers' array is the numbers in a file that I mention above, and the 'Colors' array is a color in Hex to render the pixel with
function Display()
{
    for(i = 0; i < Numbers.length; i++)
    {
        context.fillStyle = "#" + Colors[i];
        context.fillRect(x, y, 1, 1);
        x++;
        if(i + 2 + y == Numbers[i + 1])
        {
            x=0;
            y++;
        }
    }
}

这是一个渲染黑白图像的测试文件，如下所示：

X X
XXX

[Number]; [十六进制颜色＃]
1; 000000
2; FFFFFF
3; 000000
5; 000000
6; 000000
7; 000000

通过JavaScript性能提示/建议的HTML画布

0 个答案: