javascript – 如何在逐个像素的HTML5画布上绘制

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

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

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

运行computeRow 900次的过程大约需要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);
    }
}

解决方法

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

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

var ctx = document.getElementById('plot').getContext('2d');
var imgdata = ctx.getimageData(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);

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