在 Html5 Canvas 上以浮点坐标绘制图像
如您所知，在画布上绘图时使用圆角坐标会更快。此外，浮动坐标可能会导致画布上出现意外的间隙。例如，您正在将 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
图像将被绘制为浮动坐标怎么办？我怎样才能舍入该坐标？
As you know using rounded coordinates while drawing on canvas is faster. Also floating coordinates may cause unintended gaps on canvas. For example, you are drawing google map tiles to canvas, 256x256 tiles work well, if the starting coordinates are integer.
If not, to avoid one pixel unpainted lines, you should round the coordinates.
Here, that's Ok.
But, what if you should use scaling, transformation over canvas, how can you round the coordinates?
e.g.
ctx.drawImage(image, round(x), round(y), 256, 256);
is OK.
But what if
ctx.scale(1.0/65536);
ctx.translate(118079.4);
ctx.drawImage(image, x, y, 256, 256); // where x and y are integers like 118413
The image will be drawn into floating coordinates. How can I round that coordinates?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用浮点坐标绘制图像速度慢的原因并不是因为使用整数作为坐标和变换速度更快，而是因为坐标的分数分量，图像将被重新采样到不同的像素位置。
对于在整数坐标（100% 缩放）处绘制的图像不需要进行这种重新采样，并且可能是图像绘制代码的快速路径。如果您正在进行任何缩放、旋转或非整数平移，则可能会使用较慢的图像重采样例程。
处理具有浮点坐标的图像之间的间隙的一种方法是使图像稍大以覆盖间隙，或者将具有圆角坐标的所有可见图块渲染到隐藏的未旋转画布中，然后绘制它，旋转和缩放，进入可见的一处。
The reason that drawing images with floating point coordinates is slow is not because using integers for the coordinates and transformations is faster, but that because of the fraction component of the coordinate the images will be resampled to different pixel positions.
This resampling does not need to happen for images drawn at integer coordinates (with 100% scaling) and is likely a fast path for the image drawing code. If you are doing any scaling, rotation or non-integer translation, the slower image resampling routine may be used.
One way of dealing with gaps between images with floating point coordinates is to make the images slightly larger to cover the gaps, or, render all the visible tiles with rounded coordinates into an hidden un-rotated canvas and then draw that, rotated and scaled, into the visible one.