今回は HTML5 で用意されている canvas を使って図形を描画する方法について説明します。
この canvas は以前の様に Flash や Java を使わずに JavaScript で図形を描画することができます。
canvas の使い方ですが、以下の様に順を追って説明します。
■canvasを使う準備
以下の様に HTML ソースの中に canvas タグを定義します。 タグIDは取敢えず canvas とし width height で領域の大きさを設定します。
その後 javascript で canvas にアクセスする為に canvas オブジェクトを取得します。 さらに canvas オブジェクトからグラフィック用コンテキストオブジェクトを取得します。
コンテキストオブジェクトの中のメソッドを使って各種の描画を行います。
<canvas id="canvas" width="200" height="200" ></canvas>
...
<script type="text/javascript">
...
var canvas = $("#canvas"); //canvasオブジェクトを取得
var ctx = canvas[0].getContext("2d"); //コンテキストオブジェクトを取得
//"2d":2次元グラフィック
...
</script>
■直線の描画
直線の描画を行う為のコンテキストオブジェクトのメソッドは以下のものがあります。
| メソッド | 書式 | 説明 |
|---|---|---|
| beginPath | beginPath() | 線処理の開始指定 |
| moveTo | moveTo(x, y) x:点の x (水平) 座標 y:点の y (鉛直) 座標 |
点の移動 |
| lineTo | lineTo(x, y) x:線の終点の x 座標 y:線の終点の y 座標 |
現在の点と指定された座標で直線を描画 （この線は実際には描画されません） |
| closePath | closePath() | beginPathで始めたパスを最後に閉じる （閉じた図形が描画される） |
| stroke | stroke() | 現在まで蓄積された描画情報で実際に描画する |
直線の例として以下のソースを示します。 closePath の部分がコメントになっていますが、 このまま実行すると、ソースの下の実際のボタンの「Line」の処理となり、 コメントを解除すると三角形を描画する「Triangle」の処理となります。
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Line関数
function drawLine() {
var canvas = $("#canvas");
var ctx = canvas[0].getContext("2d");
//パス開始
ctx.beginPath();
//パス始点の座標
ctx.moveTo( 10, 10);
//線の終点の座標
ctx.lineTo(190,190);
//引き続いて線の終点の座標
ctx.lineTo( 10,190);
//パス終了
//ctx.closePath();
//パスの輪郭の描画
ctx.stroke();
return false;
}
</script>
</head>
<body>
<h2>test canvas</h2>
<canvas id="canvas" width="200" height="200" ></canvas>
<br />
<button onclick="drawLine();">Line</button>
</body>
</html>
「Line」をクリックすると2本の線が「Triangle」をクリックすると三角形の線が描画されます。
■四角形の描画
四角形の描画を行う為のコンテキストオブジェクトのメソッド・プロパティは以下のものがあります。
| メソッド・ プロパティ | 書式 | 説明 |
|---|---|---|
| strokeStyle | strokeStyle = color color:cssで用いる色指示 |
枠線の色指定 |
| strokeRect | strokeRect(x, y, width, height) x:四角形の左上の x (水平) 座標 y:四角形の左上の y (鉛直) 座標 width:四角形の横幅 height:四角形の高さ |
四角形の描画 線の色は直前のstrokeStyleで指定されたもの |
| fillStyle | fillStyle = color color:cssで用いる色指示 |
塗りつぶしの色指定 |
| fillRect | fillRect(x, y, width, height) x:四角形の左上の x (水平) 座標 y:四角形の左上の y (鉛直) 座標 width:四角形の横幅 height:四角形の高さ |
四角形の描画し内部を塗りつぶす 塗りつぶす色は直前のfillStyleで指定されたもの |
| clearRect | clearRect(x, y, width, height) x:四角形の左上の x (水平) 座標 y:四角形の左上の y (鉛直) 座標 width:四角形の横幅 height:四角形の高さ |
四角形の領域をクリアする |
四角形の例として以下のソースを示します。
strokeStyle で線の色を設定し strokeRect で四角い枠を描画します。
fillStyle で塗りつぶす色を設定し fillRect で四角い領域を塗りつぶします。
最後に clearRect で四角い領域をクリアします。
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Rect関数
function drawRect() {
var canvas = $("#canvas");
var ctx = canvas[0].getContext("2d");
//[strokeRect]用色指定
ctx.strokeStyle = "red";
//四角形・枠のみ描画
ctx.strokeRect( 10, 10, 180, 180);
//[fillRect]用色指定
ctx.fillStyle = "green";
//四角形・全体を塗りつぶす
ctx.fillRect( 50, 50, 100, 100);
//四角形・全体をクリア
ctx.clearRect( 75, 75, 50, 50);
return false;
}
</script>
</head>
<body>
<h2>test canvas</h2>
<canvas id="canvas" width="200" height="200" ></canvas>
<br />
<button onclick="drawRect();">Rectangle</button>
</body>
</html>
「Rectangle」をクリックすると3種類の四角形が描画されます。
■円の描画
円の描画を行う為のコンテキストオブジェクトのメソッド・プロパティは以下のものがあります。
| メソッド・ プロパティ | 書式 | 説明 |
|---|---|---|
| arc | arc(x, y, radius, startAngle, endAngle [, anticlockwise]) x:円の中心の x (水平) 座標 y:円の中心の y (鉛直) 座標 radius:円の半径 startAngle:円の開始角度(ラジアン:πの値で指定) endAngle:円の終了角度(ラジアン:πの値で指定) anticlockwise:trueで時計回り、falseで反時計回りの描画 |
円の描画 |
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Circle関数
function drawCircle() {
var canvas = $("#canvas");
var ctx = canvas[0].getContext("2d");
//[strokeRect]用色指定
ctx.strokeStyle = "red";
//[fillRect]用色指定
ctx.fillStyle = "yellow";
//線の幅は3px
ctx.lineWidth = 3;
//パス開始
ctx.beginPath();
//円描画:中心(100, 100)で半径50pxの円
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
//パス終了
ctx.closePath();
//塗りつぶす
ctx.fill();
//パスの輪郭の描画
ctx.stroke();
return false;
}
</script>
</head>
<body>
<h2>test canvas</h2>
<canvas id="canvas" width="200" height="200" ></canvas>
<br />
<button onclick="drawCircle();">Circle</button>
</body>
</html>
「Circle」をクリックすると円が描画されます。
PR
コメント