在Html5画布上绘制浮点坐标的图像

Question

如您所知，在画布上使用圆角坐标会更快。此外，浮动坐标可能会在画布上造成意外间隙。例如，您正在将 Google 地图瓦片绘制到画布上，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

图像将被绘制到浮动坐标中。如何使这些坐标四舍五入？

- user706071

---

你正在使用浮点数值进行缩放和平移，为什么不使用整数呢？ - itorres

Answer 1

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

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

处理浮点坐标图像之间间隙的一种方法是使图像稍微大一些来覆盖间隙，或者将所有可见瓦片用四舍五入的坐标渲染到一个隐藏的未旋转画布中，然后将其旋转和缩放后绘制到可见画布中。

- andrewmu

---

阅读您在此处的答案 - 您写道“使用整数坐标绘制图像缓慢”的原因是指“使用浮点数坐标绘制图像缓慢”，对吗？ - Mishax