HTML5 Canvas没有显式设置单个像素的方法。
可以使用非常短的行设置像素，但反字符和行大写可能会干扰。
另一种方法可能是创建一个小的ImageData对象，并使用:
context.putImageData(data, x, y)
把它放在合适的位置。
有人能描述一种高效可靠的方法吗?
当前回答
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对象更有效。
像sdleihssirhc说的那样画一个矩形!
ctx.fillRect (10, 10, 1, 1);
^——应该在x:10, y:10处画一个1x1的矩形
纯粹出于诊断目的，我使用这个简单的函数。
请注意。如果不使用整数坐标，得到的图像是模糊的。
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 ();
}
由于不同的浏览器似乎更喜欢不同的方法，也许在加载过程中对所有这三种方法进行一个较小的测试，以找出使用哪个方法最好，然后在整个应用程序中使用该方法是有意义的。
我没有考虑过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块中不需要字符串处理或解析。
