什么是
ctx.mozImageSmoothingEnabled = false;
对于 webkit（或其他浏览器）？我需要它来消除抗锯齿，因为我正在尝试对图像进行像素化效果。使用抗锯齿，它看起来质量很差，但没有锐利的边缘。
【问题讨论】：
ctx.webkitImageSmoothingEnabled=false 现在可以在 Chrome 22 中使用
对于<canvas> 标签，在 r117635 和 Chrome Canary 21.0.1154.0 之后的 WebKit nightlies 现在具有 webkitImageSmoothingEnabled 属性。 （请注意，这仅适用于 <canvas>，而不适用于更普遍的 HTML 元素。）
【讨论】：
var ctx = canvas.getContext('2d'); ctx.webkitImageSmoothingEnabled = false; 或 ctx.mozImageSmoothingEnabled = false;
如果您想绘制没有平滑边缘的形状，请尝试在坐标上使用半像素。
将每个像素想象成一个大正方形。整数坐标 (0, 1, 2…) 是正方形的边缘。如果你画一个单位宽的 整数坐标之间的线，它将重叠对边 的像素正方形，结果线将被绘制两个像素 宽的。要画一条只有一个像素宽的线，你需要移动 坐标系垂直于直线方向的 0.5 倍。
例如，如果您尝试从 (1, 0) 到 (1, 3) 画一条线，则 浏览器会在两边画一条覆盖 0.5 个屏幕像素的线 x=1。屏幕无法显示半个像素，因此将行扩展为 共覆盖两个像素：
但是，如果您尝试从 (1.5, 0) 到 (1.5, 3) 画一条线，浏览器 将在 x=1.5 的任一侧绘制一条覆盖 0.5 个屏幕像素的线， 这会产生一条真正的 1 像素宽的线：
【讨论】：
AFAIK 还没有。您可能会得到相同的效果，逐个像素地绘制您想要的东西，但需要更多的工作（嘿，如果它是线条之类的东西，那就没有那么多了）。
【讨论】：
快速浏览下面 Stephan 报告的链接，可以看到错误跟踪器上对此问题的以下更新：
CSS3 的图像渲染“优化对比度”的建议值已在错误 56627 中实现为“-webkit-优化对比度”。现在在 WebKit 中，使用它可以获得最近邻插值。
所以 CSS 设置 -webkit-optimize-contrast 看起来就是答案。
【讨论】：
有一个（差不多一岁的）bug report in webkit 关于这个。另一种可能性是创建更高分辨率的像素艺术并按比例缩小它们。这可能会比升迁产生更好的结果，但会与更高的流量需求相结合。
【讨论】：
在屏幕上显示您的图像之前，将您的 X 和 Y 取整。
如果您在子像素上绘制图像，某些浏览器会在显示图像之前尝试对其进行抗锯齿处理。
更快的方法是使用零的二进制OR。
myObject.X = myObject.X | 0;
如需更深入的解释，请阅读本文：
http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/
这是一个关于舍入方法的 jsperf 测试：
【讨论】：
myObject.X = myObject.X >> 0 快一点。请注意，这两个都将像Math.floor，而不是Math.round
myObject.X = ~~myObject.X。 See the jsperf.
Math.floor 始终比| 0 快。这动摇了我认为我所知道的关于舍入技巧的一切......