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

时间:2019-06-26 16:18:45

标签: javascript html performance canvas html5-canvas

我正在创建一段特定的代码,该代码在每一列上从左到右渲染像素,并且我编写了一些效果很好的代码,但是渲染一个小的(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

0 个答案:

没有答案