javascript - 如何在 HTML5 Canvas 上逐像素绘制

Question

假设我有一个 900x900 的 HTML5 Canvas 元素。

我有一个名为 computeRow 的函数，它接受网格上行的编号作为参数，并返回一个包含 900 个数字的数组。每个数字代表 0 到 200 之间的一个数字。有一个名为 colors 的数组，其中包含一个字符串数组，例如 rgb(0,20,20)。

基本上，我的意思是我有一个函数可以逐个像素地告诉 Canvas 上给定行中的每个像素应该是什么颜色。多次运行此函数，我可以计算 Canvas 上每个像素的颜色。

运行computeRow 900次的过程大约需要0.5秒。

然而，图像的绘制时间比这长得多。

我所做的是，我编写了一个名为 drawRow 的函数，它将一个包含 900 个数字的数组作为输入并将它们绘制在 Canvas 上。 drawRow 的运行时间比 computeRow 长得多!我该如何解决这个问题？

drawRow 非常简单。它看起来像这样:

function drawRow(rowNumber, result /* array */) {
    var plot, context, columnNumber, color;
    plot = document.getElementById('plot');
    context = plot.getContext('2d');
    // Iterate over the results for each column in the row, coloring a single pixel on
    // the canvas the correct color for each one.
    for(columnNumber = 0; columnNumber < width; columnNumber++) {
        color = colors[result[columnNumber]];
        context.fillStyle = color;
        context.fillRect(columnNumber, rowNumber, 1, 1);
    }
}

Answer 1

我不确定你到底想做什么，所以如果我错了，我深表歉意。

如果您尝试为 Canvas 上的每个像素写入一种颜色，您可以这样做:

var ctx = document.getElementById('plot').getContext('2d');
var imgdata = ctx.getImageData(0,0, 640, 480);
var imgdatalen = imgdata.data.length;
for(var i=0;i<imgdatalen/4;i++){  //iterate over every pixel in the canvas
  imgdata.data[4*i] = 255;    // RED (0-255)
  imgdata.data[4*i+1] = 0;    // GREEN (0-255)
  imgdata.data[4*i+2] = 0;    // BLUE (0-255)
  imgdata.data[4*i+3] = 255;  // APLHA (0-255)
}
ctx.putImageData(imgdata,0,0);

这比为每个像素绘制一个矩形要快得多。您唯一需要做的就是将颜色分成 rgba() 值。