画布自动像素混合/过渡功能

Question

我注意到一些 canvas2d 方法似乎有一个令我惊讶的特性。特别是 context.lineTo(x, y) 和 context.drawImg(imgObj, x, y) 方法。我原以为 x,y 坐标只能采用整数，但如果我将它们作为浮点数给出，似乎会发生一些特别的事情 - 浏览器似乎神奇地调整了图形组件边缘的像素颜色以进行绘制它们“介于”两个离散的相邻像素坐标之间。

例如，假设我的笔划颜色是黑色，然后我调用context.lineTo(100.2, 0)。我会得到一条漂亮的黑线，指向 x 坐标 100，但坐标 101 处的像素也被绘制，但它被绘制成灰色阴影，似乎与 x 坐标的小数部分相对应（例如，深灰色context.lineTo(100.4, 0))

I made a jsfiddle demo

我为图像和线条制作动画以直观地展示效果。在这两种情况下，下部图像和下部线都是通过将浮点参数传递给画布方法来设置动画的 - 您可以看到它们是如何非常平滑的，因为浏览器正在发挥它的魔力。在高显示器分辨率下很难看到线条效果，但它就在那里。该图像令人印象深刻，因为它不仅融合了边缘，而且似乎完全意识到了透明度。

opera、firefox 和 chrome 似乎都可以做到。

我的问题：
这是否记录在任何浏览器/规范中？
有这个术语吗？

我想将此称为某种形式的抗锯齿或插值，但我认为这两个术语中的任何一个都不正确。我想知道它叫什么。

Answer 1

与大多数画布系统一样，HTML5 的一种是基于浮动坐标。圆角坐标是在屏幕像素之间。

这意味着必须发生混叠，以便更好地拟合您放置在多个“真实像素”上的像素。

了解这一点非常重要，因为它会导致线条更模糊和更宽，具体取决于线条的位置。在下图中，两条线的 lineWidth 均为 1，但第一条线绘制在 y=1，而第二条线绘制在 y=4.5：

请参阅this post I wrote on this problem，其中我提供了 2 个函数作为处理它的示例（我也对矩形使用类似的函数）。更一般地说，您必须考虑线宽，但使用图片应该清楚逻辑：要具有清晰的形状，请尝试填充真实的屏幕像素。

在非整数坐标处绘制图像会使图像平滑，这很少是期望的效果，并且还会带来性能损失，因为必须进行插值。通常，您应该在屏幕比例下绘制图像，仅在圆角坐标上绘制，这既是为了表现，也是为了保真原件。

Answer 2

不过，不要过度依赖画布功能，它会减慢速度：http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-avoid-float