Question

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

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

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

Answer 1

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

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

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);

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

缩放后形状之间的差距

1 个答案: