function setPixel(imageData, x, y, r, g, b, a) {
    var index = 4 * (x + y * imageData.width);
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}

长方形呢?这比创建ImageData对象更有效。

由于不同的浏览器似乎更喜欢不同的方法，也许在加载过程中对所有这三种方法进行一个较小的测试，以找出使用哪个方法最好，然后在整个应用程序中使用该方法是有意义的。

纯粹出于诊断目的，我使用这个简单的函数。

请注意。如果不使用整数坐标，得到的图像是模糊的。

setPixel (context, 100, 100, 'blue');

function setPixel (ctx, x, y, c) {

//  integer coordinates are required.

    ctx.save ();
    ctx.fillStyle = c;
    ctx.fillRect (x, y, 1, 1);
    ctx.restore ();

}

嗯，你也可以只做一个1像素宽的线，长度为1像素，让它的方向沿着一个轴移动。

            ctx.beginPath();
            ctx.lineWidth = 1; // one pixel wide
            ctx.strokeStyle = rgba(...);
            ctx.moveTo(50,25); // positioned at 50,25
            ctx.lineTo(51,25); // one pixel long
            ctx.stroke();

如果你担心速度，那么你也可以考虑WebGL。