帆布线角怪渲染

帆布很奇怪的拉伸角度的例子，左边一个是方形，右边是真的尖锐：帆布线角怪渲染

enter image description here

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

任何人知道如何使这些相同，没有关闭和打开路径？

来源

2013-11-23 Nik Terentyev

使用圆形端盖和连接会使线条端部和角度看起来相同，但在抚摸之前关闭路径会使其看起来更好。如果你不关闭路径，渲染引擎将无法知道这两条线应该加入。 – supercat

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

来源

2013-11-23 04:53:21 K3N

没有改变任何东西...谢谢你的错误，虽然 –

@NikTerentyev请提供小提琴 – K3N

帆布线角怪渲染

回答

相关问题