忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript jQueryでcanvasを使い図形を描画する方法

今回は HTML5 で用意されている canvas を使って図形を描画する方法について説明します。
この canvas は以前の様に FlashJava を使わずに JavaScript で図形を描画することができます。
canvas の使い方ですが、以下の様に順を追って説明します。



■canvasを使う準備

以下の様に HTML ソースの中に canvas タグを定義します。 タグIDは取敢えず canvas とし width height で領域の大きさを設定します。
その後 javascriptcanvas にアクセスする為に 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

コメント

コメントを書く