HTML Canvas を利用して線を描画する
HTML Canvas を利用して線を描画するコードを紹介します。
概要
HTML Canvasで線を描画するには、Canvasコンテキストの、MoveTo(), LineTo()メソッドを利用します。
例1
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(120, 60);
context.lineTo(240, 90);
context.stroke();
}
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
<canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
<div>Canvas Demo</div>
</body>
</html>
解説
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(120, 60);
context.lineTo(240, 90);
context.stroke();
}
上記のJavaScriptが描画のコードです。document.getElementById()メソッドでCanvasオブジェクトを取得し、CanvasオブジェクトのgetContext()メソッドを呼び出してCanvasコンテキストを取得します。
コンテキストのbeginPath()メソッドを呼び出してパスを開始します。moveTo()でペンを指定した位置に移動し、lineTo()メソッドで指定した位置へ線を描画します。stroke()メソッドを呼び出すことで描画が実行されます。
実行結果
HTMLファイルを表示します。下図の結果を得られます。
例2
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(120, 60);
context.lineTo(240, 90);
context.stroke();
context.beginPath();
context.moveTo(120, 75);
context.lineTo(260, 120);
context.stroke();
context.beginPath();
context.moveTo(160, 100);
context.lineTo(200, 140);
context.lineWidth = "3";
context.stroke();
context.beginPath();
context.moveTo(200, 40);
context.lineTo(360, 120);
context.strokeStyle = '#00C080';
context.stroke();
context.beginPath();
context.moveTo(40, 20);
context.lineTo(80, 160);
context.strokeStyle = '#C00080';
context.lineWidth = "1";
context.stroke();
context.beginPath();
context.moveTo(400, 10);
context.lineTo(380, 200);
context.strokeStyle = "rgb(96, 96, 225)";
context.stroke();
}
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
<canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
<div>Canvas Demo</div>
</body>
</html>
解説
上記のコードでは、線の太さや色を変更しています。
線の太さを変更する場合は、CanvasのContextのlineWidthプロパティに線の太さを設定します。
線の色を変更する場合は、ContextのstrokeStyleプロパティに描画色を指定しいます。色指定は"#RRGGBB"の形式、"regb(rrr,ggg,bbb)"の形式、"blue", "red"などの色名が利用できます。定義されている色名については
こちらの記事を参照してください。
また、一度設定した値は、beginPath()で新しいパスを作成しても初期化されずそのまま引き継がれます。
例
context.beginPath();
context.moveTo(160, 100);
context.lineTo(200, 140);
context.lineWidth = "3";
context.stroke();
context.beginPath();
context.moveTo(200, 40);
context.lineTo(360, 120);
context.strokeStyle = '#00C080';
context.stroke();
上記のコードの場合、2本目の線はlineWidthが指定されていないため、前で指定したlineWidthの値が利用され、太さ3の線が描画されます。
実行結果
HTMLファイルを表示します。下図の結果を得られます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
