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

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))

我做了一个 jsfiddle 演示

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

Opera、firefox 和 chrome 似乎都可以做到这一点。

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

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

Answer 1

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

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

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

请参阅我在这个问题上写的这篇文章，其中我给出了我制作的 2 个函数作为处理它的示例（我也对矩形使用了类似的函数）。更一般地说，您必须考虑线宽，但使用图片的逻辑应该很清楚：要具有清晰的形状，请尝试填充真实的屏幕像素。

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

Answer 2

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