为了完成Phrogz非常彻底的回答，fillRect()和putImageData()之间有一个关键的区别。 第一个使用上下文通过添加一个矩形(不是像素)来绘制，使用fillStyle alpha值和上下文globalAlpha和转换矩阵，行大写等。 第二个替换整个像素集(可能是一个，但为什么?) 正如您在jsperf上看到的那样，结果是不同的。

没有人想一次只设置一个像素(也就是说在屏幕上绘制)。这就是为什么没有特定的API来做到这一点(这是正确的)。 在性能方面，如果目标是生成一张图片(例如光线跟踪软件)，你总是想使用一个由getImageData()获得的数组，这是一个优化的Uint8Array。然后使用setTimeout/seTInterval每秒调用putImageData()一次或几次。

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

为了完成Phrogz非常彻底的回答，fillRect()和putImageData()之间有一个关键的区别。 第一个使用上下文通过添加一个矩形(不是像素)来绘制，使用fillStyle alpha值和上下文globalAlpha和转换矩阵，行大写等。 第二个替换整个像素集(可能是一个，但为什么?) 正如您在jsperf上看到的那样，结果是不同的。

没有人想一次只设置一个像素(也就是说在屏幕上绘制)。这就是为什么没有特定的API来做到这一点(这是正确的)。 在性能方面，如果目标是生成一张图片(例如光线跟踪软件)，你总是想使用一个由getImageData()获得的数组，这是一个优化的Uint8Array。然后使用setTimeout/seTInterval每秒调用putImageData()一次或几次。

一种没有提到的方法是使用getImageData，然后使用putImageData。 这种方法很适合当你想要画很多的时候，快速。 http://next.plnkr.co/edit/mfNyalsAR2MWkccr

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
var id = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var pixels = id.data;

var x = Math.floor(Math.random() * canvasWidth);
var y = Math.floor(Math.random() * canvasHeight);
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var off = (y * id.width + x) * 4;
pixels[off] = r;
pixels[off + 1] = g;
pixels[off + 2] = b;
pixels[off + 3] = 255;

ctx.putImageData(id, 0, 0);

像sdleihssirhc说的那样画一个矩形!

ctx.fillRect (10, 10, 1, 1);

^——应该在x:10, y:10处画一个1x1的矩形

我没有考虑过fillRect()，但答案促使我对putImage()进行基准测试。

在(旧的)MacBook Pro上使用Chrome 9.0.597.84在随机位置放置100,000个随机颜色的像素，使用putImage()只需不到100毫秒，但使用fillRect()需要近900毫秒。(基准代码在http://pastebin.com/4ijVKJcC)。

如果我在循环之外选择一种颜色，并在随机位置绘制该颜色，putImage()需要59ms而fillRect()需要102ms。

在rgb(…)语法中生成和解析CSS颜色规范的开销似乎是造成大部分差异的原因。

另一方面，将原始RGB值直接放入ImageData块中不需要字符串处理或解析。