円弧の描画
arc
解説
arcを使用すれば円弧のパスを引くことが出来ます。
beginPathとstrokeを省いても円弧は描かれますが、FireFoxでは円弧の前後のパス描画と線がつながってしまう恐れがあるので、この二つのメソッドも併せて使用したほうが安全です。
そうしてもOperaではカレントの座標から円弧の開始点まで線が描かれてしまうため、moveToなどでカレントの座標を移動しておく必要があります。
- arc
- X座標、Y座標、半径、開始角、終了角を指定することで、円弧を描くことができます。
ソースコード
<html><head><!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--><script type="text/javascript">
function sbArc() {elmCv = document.getElementById('cv');ctxCv = elmCv.getContext('2d');ctxCv.arc(100,100,40, 0 * Math.PI / 180,40 * Math.PI / 180,1);ctxCv.arc(100,200,40,270 * Math.PI / 180,40 * Math.PI / 180,1);ctxCv.arc(100,300,40,180 * Math.PI / 180,40 * Math.PI / 180,1);ctxCv.arc(300,100,40,30 * Math.PI / 180, 0 * Math.PI / 180,1);ctxCv.arc(300,200,40,30 * Math.PI / 180,270 * Math.PI / 180,1);ctxCv.arc(300,300,40,30 * Math.PI / 180,180 * Math.PI / 180,1);ctxCv.stroke();}window.onload = sbArc;
</script></head><body><canvas id="cv" width="400" height="400"></canvas></body></html>