十进制值忽略圆弧半径

Question

我需要将一些值绘制成2D HTML5 <canvas>。所有值都在[-1，+ 1]范围内，所以我决定在绘制前在画布2D上下文中设置变换（缩放+位移）：

var scale = Math.min(canvas.width, canvas.height) / 2;
ctx.setTransform(scale, 0, 0, scale, canvas.width / 2, canvas.height / 2);

使用arc方法绘制每个值，但由于我想要一个固定的弧半径（无论使用什么缩放），我将半径除以当前比例值：

ctx.arc(value.X, value.Y, 2 / scale, 0, 2 * Math.PI, false);

现在，尺寸为200 x 200的canvas将导致比例因子为100，这反过来导致弧半径为0.02。不幸的是，似乎0.2或0.02之类的值对得到的弧半径没有任何影响，只有行程厚度在变化。

您可以在JsFiddle中看到此行为。这是一个错误还是我做错了什么？

Answer 1

问题在于，通过一个巨大的因子缩放你的线后，你现在的线宽太大而无法用笔画正确绘制。
只需在绘图前将lineWidth调整为1 / scale，一切都会正常工作。