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

Question

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

例如，假设我的笔触颜色为黑色，然后我调用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