Html 绘制直线或圆弧时，画布是否支持浮点数？

在canvas元素中，

lineTo

和

arc

方法是否实际将浮点数视为浮点数

例如：

context.moveTo(20.4562, 80.8923);
context.lineTo(120.1123, 90.2134);
context.arc(24.5113, 36.7989, 20.123, 0, Math.PI*2); 

---

画布是否真的支持浮点数坐标，或者在绘制直线、圆弧、矩形等时仅将浮点数转换为整数？

屏幕设备是一个像素设备，因此任何图形最终都映射到整个像素，即整数。但是，在HTML5画布中使用浮点坐标而不是整数确实会改变结果

如果使用非整数的坐标绘制，它会自动使用抗锯齿来尝试平滑线。您可以在中看到一个示例

它还影响

drawImage

，有关更多详细信息，请参见此

---

请注意，使用浮点坐标会造成严重的性能损失。

位图本身不支持浮点值。它只能处理整数值。画布的2D上下文主要处理本身未连接到位图的路径

路径是任意的，在内部仅作为向量存在。当它们被笔划或填充时，它们将经历一个光栅化过程，即转换为位图表示

位图中的路径及其指定点本身可以包含分数值，但位图不能。但是，可以使用插值（子像素化）来表示分数值，这给人的印象是具有更大的可用位图分辨率，这反过来又会删除锯齿状的look if值，而这些值仅被缩减为整数

（分辨率是进行插值的关键。屏幕大约相当于72-96 DPI。如果屏幕的分辨率更高，300+DPI，则不需要插值，就像打印一样。但我们现在已经做到了。如果不使用插值来补偿分辨率不足，则图形会显得参差不齐）

下面是它的工作原理 当一个像素落在一个整数界限值上时，将该像素设置为该值是一个简单的情况

当你处理一个浮点时，没有地方可以部分设置一个像素，它要么向下舍入（floor'ed），要么放入下一个单元格（ceil'ed），即3.2变为3，3.7变为4等等

插值/子像素化 然而，几十年前有人提出了将分数部分表示为实际像素和下一个像素之间的混合的想法

如果像素值为3.5，那么分数部分将代表50%的黑色和50%的白色。它仍然会占据一个完整的像素单元，但由于它太小了，它似乎只占据了它单元的一小部分，这要归功于周围的像素，这些像素构成了错觉

因此，在这种情况下，最后一个像素集wold如下所示：

如果该值为3.25，则剩余像素中只有25%会混合，使最后一个像素看起来像：

这将应用于将落在分数值上的所有像素。当您绘制一条对角线，并且一些点“穿过”两个像素时，这些点的混合将应用于基于闭合整数的放置，使该线看起来平滑

现在，在画布的情况下，使用alpha通道对形状进行插值。然后使用波特·达夫（Porter Duff）将形状与现有内容进行混合和合成，这就是我们所看到的最终结果

在性能方面，这也是需要考虑的。如果需要插值，成本会上升，对于每个像素，浏览器（或子系统）必须计算分数表示。因此，在将整数值传递给path方法之前，可以通过舍入来确保使用整数值。这当然不适用于圆弧、椭圆、某些角度的对角线等，但在某些情况下可以帮助加快速度

这是使用分数坐标时适用的插值原理。然而，还有更复杂的插值和亚像素方法。在现代世界，2x2或4x4采样更为常见，以提供更准确的结果

演示 如果我们做一个小的放大线，当我们改变分数值时，我们可以看到线的末端“淡入淡出”

这条线有3个像素宽，然后我们在[0,1]之间添加一个分数值，我们可以看到最后一个单元格像素正在重新采样：

var ctx=document.querySelector（“canvas”）.getContext（“2d”），
x=3.1，dx=0.1；
ctx.imageSmoothingEnabled=ctx.mozImageSmoothingEnabled=ctx.webkitImageSmoothingEnabled=false；
ctx.font=“14px无衬线”；
（函数循环（）{
ctx.fillStyle=“#000”；
ctx.clearRect（0,0350,50）；
fillRect（0,0，x，1）；//强制演示的像素对齐
drawImage（ctx.canvas，0,0,4,1,0,0,200,50）；
x+=dx；
如果（x=4）dx=-dx；
信息（x）；
document.querySelector（“div”）.innerHTML=“长度：”+x.toFixed（2）；
设置超时（循环，160）
})();
功能信息（x）{
ctx.fillStyle=“#f00”；
ctx.fillText（“感知长度”，210,19）；
ctx.fillRect（0,15,x*50,2）；
ctx.fillRect（x*50-1,12,2,7）；
x=x==3？3:4；
ctx.fillText（“实际长度”，210,40）；
ctx.fillRect（0,35,x*50,2）；
ctx.fillRect（x*50-1,32,2,7）；
}

div{font:bold 14px sans serif}

不正确。。。（1） 现代设备具有亚像素分辨率，canvas不会将其图形映射到整个整数，（2）JavaScript本身本机使用浮点数，canvas也使用浮点数，因此使用浮点数不会改变结果。（3） Canvas将始终使用抗锯齿来平滑路径（4），因为JS本机使用浮动，所以使用浮动不会造成性能损失。