在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 

的图像将被抽入浮动坐标。我怎么能围绕这个坐标？

Answer 1

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

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

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