HTML5画布像素可以切割得有多小？

Question

在Flash中，像素是使用twips（即像素的二十分之一）计算的。因此，每个位置始终是0.05的倍数。我没有看到HTML Canvas规范中提到这一点，并且无法跟踪Canvas上的光标位置。有人知道其像素计算的准确度吗？ 澄清编辑： 我更多地指的是Zeno's paradox，它说为了将某物从A点移动到B点，它必须首先移动到两者之间的一半。然后再次移动一半，如此往复。

因此，如果我想在x轴上以0.5的速度从0点移动到100点：

1. 第1帧：50
2. 第2帧：75
3. 第3帧：87.5
4. 然后：93.75、96.875、98.4375等。

那么Canvas实际上在哪一步向上舍入到下一个像素？

- Marcus Booster

---

不确定具体与画布有关，但是Chrome的CSS实现从来不喜欢包含小数位的尺寸值。 - lpd

Answer 1

我不确定你所说的切片精度是什么意思。

画布上的像素可以绘制到不到0.10，之后它们的可见影响几乎没有。

当然，如果你进行缩放，就可以绘制大小为0.00125像素等等的东西。但如果你取消缩放，它们将不可见。

http://jsfiddle.net/GvVD9/

(左上角的第一个方块是一个像素)

鼠标的准确性是完全不同的事情，与画布规范无关。

编辑：

好吧，我们可以演示一下。我们可以绘制一堆y值接近100的像素，看看它们与使用y值100绘制的红色像素相比如何。

http://jsfiddle.net/GvVD9/46/

每个水平分隔的部分都只是使用drawRect命令绘制的单个1x1像素矩形。

50
75
87.5
93.75  // first black pixel you see in image
96.875
98.4375
99.21875
99.609375
99.8046875
99.90234375
99.951171875
99.9755859375
99.98779296875
99.993896484375
99.9969482421875 // last black pixel you see in image

- Simon Sarris

---

不错的小演示。我很有学问。 - peteorpeter

谢谢，你的代码解决了一些问题。据我所知，在Canvas中没有限制，而是由UA定义。这使得浏览器可以拥有高分辨率的后备存储。 - Marcus Booster

正确，这意味着您可以以类似SVG的方式编写路径/文本，并在缩放到大值时期望非常准确的表示。尽管上述实现在不同浏览器中略有不同（抗锯齿与否并不是您可以选择的选项，而是浏览器不幸做出的选择）。此外，在某些浏览器中（Chrome，Opera），缩放+旋转文本会出现问题。 - Simon Sarris