線の描画
beginPath / closePath / moveTo / lineTo / stroke / bezierCurveTo / quadraticCurveTo
解説
moveToとlineToを使用すれば線を引くことが出来ます。
まず、直線を引くには以下のメソッドを使用します。
- beginPath
- まずはbeginPathでパスの開始を宣言します。
- moveTo
- moveToで線を開始する座標を指定します。
- lineTo
- その後連続してlineToを使うことで線を引くことができます。
- closePath
- 最後まで線を引いたところで、closePathを使えば、最後の座標から最初の座標へ線を引くことができます。
- stroke
- 実際に線が表示されるのはstrokeを使用したときです。
- strokeを使用するまでは、あくまでパスで領域を描いているだけなので、そのパスに線を引きたければstroke、塗りつぶしたければ他のメソッドを使用します。
曲線を引きたい場合は以下のメソッドを使用します。
- bezierCurveTo
- bezierCurveToを使えば三次ベジェ曲線を引くことができます。
制御点のXY座標を二箇所と、終点のXY座標を指定します。 - quadraticCurveTo
- quadraticCurveToを使えば二次ベジェ曲線を引くことができます。
制御点のXY座標と、終点のXY座標を指定します。
ソースコード
<html>
<head>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function sbLine() {
elmCv = document.getElementById('cv');
ctxCv = elmCv.getContext('2d');
//lineTo
ctxCv.beginPath();
ctxCv.moveTo(50,30);
ctxCv.lineTo(350,40);
ctxCv.lineTo(350,60);
ctxCv.lineTo(200,100);
ctxCv.closePath();
ctxCv.stroke();
//bezierCurveTo
ctxCv.beginPath();
ctxCv.moveTo(50,130);
ctxCv.bezierCurveTo(350,140,350,160,200,200);
ctxCv.closePath();
ctxCv.stroke();
//quadraticCurveTo
ctxCv.beginPath();
ctxCv.moveTo(50,230);
ctxCv.quadraticCurveTo(350,240,350,260);
ctxCv.quadraticCurveTo(300,280,200,300);
ctxCv.closePath();
ctxCv.stroke();
}
window.onload = sbLine;
</script>
</head>
<body>
<canvas id="cv" width="400" height="400"></canvas>
</body>
</html>