帆布线角度奇怪的渲染

Question

画布非常奇怪地在示例中绘​​制角度，左边是方形，右边是真正锋利的。：

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

有人知道如何在不关闭和打开路径的情况下制作相同的内容吗？

Answer 1

您可以将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;