删除画布中矩形形状之间出现的空白

Question

我正在画布中不断渲染矩形。当矩形值处于浮点值时，它将在矩形之间创建一些空白。

请在下面找到图片。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save();
ctx.beginPath();
ctx.moveTo(20.5, 20.5);
ctx.arcTo(20.5, 20.5, 100.5, 20.5, 0);
ctx.arcTo(100.5, 20.5, 100.5, 70.5, 0);
ctx.arcTo(100.5, 70.5, 20.5, 70.5, 0);
ctx.arcTo(20.5, 70.5, 20.5, 20.5, 0);
ctx.closePath();
ctx.fill();


ctx.beginPath();
ctx.moveTo(100.5, 20.5);
ctx.arcTo(100.5, 20.5, 180.5, 20.5, 0);
ctx.arcTo(180.5, 20.5, 180.5, 70.5, 0);
ctx.arcTo(180.5, 70.5, 100.5, 70.5, 0);
ctx.arcTo(100.5, 70.5, 100.5, 20.5, 0);
ctx.closePath();
ctx.fill();
ctx.restore();

<canvas id="myCanvas" width="600" height="250" style="border:1px solid #d3d3d3;">
</canvas>

能否请您分享如何克服这个问题。

Answer 1

您自己说的话，有浮点值。如果删除小数，您将不再看到空格。 但是，如果您确实无法更改值，也许可以尝试添加：

ctx.translate(0.5,0.5);

jsfiddle