如何在逐个像素的HTML5画布上绘图

Question

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

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

基本上,我所说的是我有一个函数可以逐个像素地告诉画布上给定行中每个像素应该是什么颜色.多次运行此功能,我可以为画布上的每个像素计算颜色.

运行computeRow900次的过程大约需要0.5秒.

但是,图像的绘制需要更长的时间.

我所做的是我编写了一个函数drawRow,它将一个包含900个数字的数组作为输入并在画布上绘制它们. 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

我不确定你到底想要做什么,所以如果我错了,我道歉.

如果您尝试为画布上的每个像素写一个颜色,这就是您要这样做的方法:

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()值.