Javascript 画布线条角度奇怪的渲染

画布在示例中非常奇怪地绘制角度，左一个是方形的，右一个非常尖锐

    guideCtx.lineWidth = screenWidth*.003;

    var xC = x0 = e.clientX;
    var yC = y0 = e.clientY;

    var r = r0 = 160;


    guideCtx.beginPath();
    guideCtx.lineCap = 'square';

    //guideCtx.arc(xC, yC, r, -Math.PI*2/3, -Math.PI/2.99, false);

    xC = x0;
    yC = y0 - r0/Math.sin(Math.PI/6);
    r = r0/Math.tan(Math.PI/6);

    guideCtx.arc(xC, yC, r, Math.PI*4/6, Math.PI*2/6, true);

    guideCtx.lineTo(x0, y0 + r0);
    guideCtx.lineTo(x0 - r0*Math.sin(Math.PI/3), y0 - r0*Math.sin(Math.PI/6));

    guideCtx.strokeStyle = 'rgba(255,255,255,1)';
    guideCtx.stroke();

    guideCtx.closePath();

---

任何人都知道如何在不关闭和打开路径的情况下使其相同？

您可以将

lineCap

（或

lineJoin

）更改为例如

round

或者，可以调整斜接值并使用斜接线连接和限制：

ctx.lineJoin = 'miter';
ctx.miterLimit = 5;     /// this will adjust the spike

此外，您的

var

用法与您认为的不同：

var xC = x0 = e.clientX;

这将分配

xC

，

x0

，但最终将分配到窗口对象上。您需要明确定义它们：

var xC, x0;
xC = x0 = e.clientX;

---

@Niktrentyev请提供一个小提琴使用圆形端盖和连接将使线端和角度看起来相同，但在划水之前关闭路径将使其看起来更好。如果不关闭路径，渲染引擎将无法知道这两条线是否应该连接。