線の描画

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>

サンプル

Copyright © 1999-2006 Hikijishi All Rights Reserved.
[] [cgp][0.00210785865783691]