画布图像平滑

Question

什么是

  

ctx.mozImageSmoothingEnabled = false;

for webkit（或其他浏览器）？我需要它来消除抗锯齿，因为我试图获得像素化效果的图像。使用抗锯齿功能时，它看起来质量很差，但没有锐边。

Answer 1

对于<canvas>标记，WebKit在r117635之后的夜晚和Chrome Canary 21.0.1154.0现在具有webkitImageSmoothingEnabled属性。 （请注意，这仅适用于<canvas>，而不适用于更常见的HTML元素。）

Answer 2

如果要绘制没有光滑边缘的形状，请尝试在坐标上使用半像素。

  

想象一下每个像素都是一个大方块。整数坐标   （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像素宽线：

     

来源：http://diveintohtml5.info/canvas.html

Answer 3

AFAIK还没有。您可能会获得相同的效果，逐个像素地绘制您想要的内容，但需要更多的工作（嘿，如果它像线条那么多，那就不那么多了。）

Answer 4

快速查看下面Stephan报告的链接，可以看到错误跟踪器上此问题的以下更新：

  

CSS3的图像渲染'优化对比'的建议值已在错误56627中实现为'-webkit-optimize-contrast'。现在在WebKit中，使用它将获得最近邻插值。

因此CSS设置-webkit-optimize-contrast看起来就是答案。

Answer 5

这有一个（差不多一岁）bug report in webkit。另一种可能性是以更高的分辨率创建您的像素艺术并缩小它们。这可能会比升级产生更好的结果，但会与更高的流量需求相结合。

Answer 6

在屏幕上显示图像之前，将X和Y展开。

如果您在子像素上绘制图像，某些浏览器会在显示图像之前尝试对其进行反锯齿。

更快的方法是使用零的OR二进制文件。

myObject.X = myObject.X | 0;

如需更深入的解释，请阅读本文：

http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/

这是一个关于舍入方法的jsperf测试：

http://jsperf.com/math-floor-vs-math-round-vs-parseint/5