在 Html5 Canvas 上以浮点坐标绘制图像答案

【问题标题】：Drawing Images on Html5 Canvas at floating point coordinates在 Html5 Canvas 上以浮点坐标绘制图像
【发布时间】：2011-10-30 03:54:13
【问题描述】：

如您所知，在画布上绘图时使用圆角坐标更快。浮动坐标也可能导致画布上出现意外的间隙。例如，您正在将谷歌地图图块绘制到画布上，如果起始坐标为整数，则 256x256 图块效果很好。如果不是，为了避免一个像素的未画线，您应该将坐标四舍五入。

在这里，没关系。

但是，如果你应该在画布上使用缩放、变换，你怎么能对坐标进行四舍五入呢？

例如

 ctx.drawImage(image, round(x), round(y), 256, 256);

没问题。

如果

  ctx.scale(1.0/65536);
  ctx.translate(118079.4);
  ctx.drawImage(image, x, y, 256, 256); // where x and y are integers like 118413

图像将被绘制成浮动坐标。如何舍入该坐标？

【问题讨论】：

【解决方案1】：

使用浮点坐标绘制图像慢的原因并不是因为使用整数作为坐标和变换更快，而是因为坐标的分数分量，图像将被重新采样到不同的像素位置。

对于在整数坐标处绘制的图像（具有 100% 缩放），不需要进行这种重新采样，并且可能是图像绘制代码的快速路径。如果您正在执行任何缩放、旋转或非整数平移，则可以使用较慢的图像重采样例程。

处理具有浮点坐标的图像之间的间隙的一种方法是使图像稍大以覆盖间隙，或者将具有圆角坐标的所有可见图块渲染到隐藏的未旋转画布中，然后将其绘制，旋转并缩放到可见的。

【讨论】：