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

Question

如您所知，在画布上绘图时使用圆角坐标会更快。浮动坐标也可能导致画布上出现意外间隙。例如，您正在将Google地图图块绘制到画布上，如果起始坐标是整数，则256x256图块效果很好。 如果没有，为了避免一条未上漆的像素线，你应该围绕坐标。

在这里，没关系。

但是，如果您应该使用缩放，在画布上进行转换，如何围绕坐标？

e.g。

 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

图像将绘制为浮动坐标。我该如何围绕这个坐标？

Answer 1

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

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

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