首頁猿問求指教！canvas繪制路徑的問題？

求指教！canvas繪制路徑的問題？

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>運行效果為什么左邊會出現(xiàn)紅圈這部分線，而右邊卻沒有？

查看完整描述

3 回答

肥仔匯

TA貢獻6條經(jīng)驗獲得超5個贊

原因如下

代碼第20行

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

所畫的圓起點不在直線上

CANVAS自動把豎線和起點連起來了

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

解決方案

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

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

illuminiti

TA貢獻1條經(jīng)驗獲得超0個贊

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

這樣測試可以了！

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