首頁(yè) 猿問(wèn) 求指教！canvas繪制路徑的問(wèn)題？

求指教！canvas繪制路徑的問(wèn)題？

Html5 JavaScript

illuminiti 2016-06-01 18:18:34

<!DOCTYPE?html> <html> <body> <canvas?id="myCanvas"?width="300"?height="150"?style="border:1px?solid?#d3d3d3;"> Your?browser?does?not?support?the?HTML5?canvas?tag. </canvas> <script> var?c=document.getElementById("myCanvas"); var?ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(150,5); ctx.lineTo(150,145); ctx.arc(100,75,50,0,0.25*Math.PI); //ctx.beginPath(); ctx.moveTo(50,5); ctx.lineTo(50,145); ctx.arc(100,75,50,0.75*Math.PI,1*Math.PI); //ctx.closePath(); ctx.stroke(); ctx.closePath(); </script>? </body> </html>運(yùn)行效果為什么左邊會(huì)出現(xiàn)紅圈這部分線，而右邊卻沒(méi)有？

查看完整描述

3 回答

肥仔匯

TA貢獻(xiàn)6條經(jīng)驗(yàn) 獲得超5個(gè)贊

原因如下

代碼第20行

ctx.arc(100,75,50,0.75*Math.PI,1*Math.PI);

所畫(huà)的圓起點(diǎn)不在直線上

CANVAS自動(dòng)把豎線和起點(diǎn)連起來(lái)了

所以才會(huì)出現(xiàn)這一段

解決方案

ctx.arc(100,75,50,1*Math.PI,0.75*Math.PI,true);

1 反對(duì) 回復(fù) 2016-06-02

illuminiti

TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊

ctx.beginPath();
ctx.moveTo(150,5);
ctx.lineTo(150,145);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(100,75,50,0,0.25*Math.PI);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(50,5);
ctx.lineTo(50,145);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(100,75,50,0.75*Math.PI,1*Math.PI);
ctx.stroke();
ctx.closePath();

這樣測(cè)試可以了！

反對(duì) 回復(fù) 2016-06-02