缩放后形状之间的差距 [英] Gap between shapes after scaling

问题描述

在HTML5画布中使用 scale 时，我注意到元素之间有时会出现小间隙。例如：

While using scale in HTML5 canvas, I noticed that sometimes small gaps appear between elements. For example:

context.scale(0.995, 1);
context.fillRect(0, 0, 100, 100);
context.fillRect(100, 0, 100, 100);

没有比例，两个矩形彼此紧挨着，但是有了比例，两者之间的差距很小。有没有办法摆脱它而没有舍入比例因子？

Without scale, two rectangles are close next to each other, but with scale, there's tiny gap between. Is there some way to get rid of it without rounding scale factor?

推荐答案

正如我在评论中所说这是一个渲染人工制品，因为抗锯齿。作为解决方法，您可以使用非缩放渲染的屏幕外缓冲区，然后将该图像放入原始画布并打开正确的缩放。如果这样做，该行应该消失。

As said in my comment this is a rendering artefact because of antialiasing. As workaround you may use an off-screen buffer which you render un-scaled and then put that image onto your original canvas with correct scaling turned on. If you do so the line should disappear.

以下代码段可能会给你一个想法：

The following snippet might give you an idea:

var buffer = document.createElement('canvas');
buffer.width = 200;
buffer.height = 100;
var context1 = buffer.getContext('2d');
context1.fillRect(0, 0, 100, 100);
context1.fillRect(100, 0, 100, 100);


var canvas = document.getElementById('canvasID');
var context = canvas.getContext('2d');
context.scale(0.995, 1);
context.drawImage(buffer, 0, 0);

context.fillRect(0, 120, 100, 100);
context.fillRect(100, 120, 100, 100);

将我的示例中的前两个矩形（离屏渲染）与直接绘制的底部矩形进行比较在画布上。

Compare top two rectangles in my example (off-screen rendering) with the bottom ones which were drawn directly onto the canvas.

这篇关于缩放后形状之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！