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

【问题标题】：Remove white spaces that appear between rectangle shapes in canvas删除画布中矩形形状之间出现的空白
【发布时间】：2018-06-26 17:10:26
【问题描述】：

我在画布中一个接一个地连续渲染矩形。当矩形值是浮点值时，它会在矩形之间创建一些空白。

请在下面找到图片。

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>

你能分享一下如何克服这个问题吗？

【问题讨论】：

您应该添加产生此输出的代码。这可能有助于其他人回答您的问题。
@RenéHoffmann 我已经包含了我的代码 sn-p

标签： html canvas html5-canvas

【解决方案1】：

你自己说过，有浮点值。如果您删除小数，您将不会再看到空格。但如果你真的不能改变你的价值观，也许你可以尝试添加这个：

ctx.translate(0.5,0.5);

jsfiddle

【讨论】：

我不想翻译画布，因为我们有大量具有浮点值的矩形，例如 65.345 和 34.267。我在 SVG 中遇到过同样的问题，但我已经使用 shape-rendering="crispEdges" 进行了修复。如果有这样的画布解决方案。