html - 缩放后形状之间的间隙

Question

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

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

没有比例，两个矩形彼此靠近，但有比例，两者之间有微小的差距。有没有办法在不舍入比例因子的情况下摆脱它？

Answer 1

正如我在评论中所说，由于抗锯齿，这是一个渲染伪像。作为解决方法，您可以使用一个屏幕外缓冲区，您可以在未缩放的情况下渲染该缓冲区，然后将该图像放到您的原始 Canvas 上并打开正确的缩放比例。如果这样做，该行应该会消失。

以下片段可能会给您一个想法:

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

将我示例(离屏渲染)中顶部的两个矩形与直接绘制在 Canvas 上的底部矩形进行比较。