HTML5 Canvas没有显式设置单个像素的方法。
可能使用非常短的线来设置像素，但是抗锯齿和线帽可能会干扰。
另一种方法是创建一个小的ImageData对象，并使用：
context.putimageData(data,x,y)
把它放到位。
任何人都可以描述一个有效和可靠的方法这样做吗？
解决方法
有两个最好的竞争者：
>创建1×1图像数据，设置颜色，并将putimageData放置在以下位置：
var id = myContext.createImageData(1,1); // only do this once per page var d = id.data; // only do this once per page d[0] = r; d[1] = g; d[2] = b; d[3] = a; myContext.putimageData( id,y );
>使用fillRect()来绘制像素(应该没有别名问题)：
ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
ctx.fillRect( x,y,1,1 );
你可以在这里测试这些速度：http://jsperf.com/setting-canvas-pixel
在Chrome上，1×1图片数据大约是使用fillRect的10倍(！)。
在Firefox 3.6上，1×1的速度只有1.3倍。
在Firefox 4.0b上，1×1大约是80x(!!)比fillRect慢。
此减速仅在启用硬件加速和may be fixed时发生。
我建议使用1×1图像数据获得最大速度。
其他，sillier替代品是：
>在整个画布上使用getimageData()/ putimageData()如测试中所示，这是比其他选项慢约100倍。
>使用数据网址创建自定义图像，并使用drawImage()显示它：
var img = new Image; img.src = "data:image/png;base64," + myPNGEncoder(r,g,b,a); // Writing the PNGEncoder is left as an exercise for the reader
>创建另一个img或画布填充所有你想要的像素，并使用drawImage()blit只是你想要的像素。这可能会非常快，但有一个局限，你需要预先计算所需的像素。
注意，我的测试不会尝试保存和恢复canvas上下文fillStyle;这将进一步减慢fillRect性能。还要注意(由于测试框架的限制)我不是从一个干净的板岩开始，或测试每个测试完全相同的像素集。