情報学部 菅沼ホーム JavaScript 目次 基礎技術目次 索引

図形の描画

  1. 描画方法

      描画の話に入る前に,Window における座標系について話をしておきます.Window における座標系は,通常数学などで使用している座標系とは少し異なります.右図に示すように,画面の左上が原点となり,x 座標は右方向が正になりますが,y 座標は下方向が正になるようにとられます.また,単位もピクセル(画素)となります.従って,( 2, 5 ) という座標は,画面の左から 3 番目,上から 6 番目のピクセル(画素)を指すことになります.

      JavaScript において,図形を描画したりアニメーションを実行するためには,CANVAS 要素を利用します.具体的には,「 2d コンテキストのプロパティとメソッド」のうち「パスの生成と描画」,「Line,fill,stroke スタイル」などを利用することになります.この例では,strokeRect メソッドと arc メソッドを利用して,矩形塗りつぶした円を描いています.09 行目~ 29 行目は,「JavaScript の利用方法」の節で述べたように,他のファイルに記述し,そのファイルを参照した方が良いと思います.ただし,以下の章でも同様ですが,説明のし易さのため HTML ファイル内に記述していきます.
    01	<!DOCTYPE HTML>
    02	<HTML>
    03	<HEAD>
    04		<TITLE>図形の描画</TITLE>
    05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    06		<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
    07		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    08		<SCRIPT TYPE="text/javascript">
    09			function draw() {
    10				let canvas    = document.getElementById('canvas_e');
    11				canvas.width  = 270;   // キャンバス要素の幅
    12				canvas.height = 130;   // キャンバス要素の高さ
    13				let ctx       = canvas.getContext('2d');
    14						// 矩形(左)
    15				ctx.lineWidth = 5;
    16				ctx.beginPath();
    17				ctx.strokeRect(20, 15, 100, 100);
    18				ctx.stroke();
    19						// 塗りつぶした円
    20				ctx.beginPath();
    21				ctx.fillStyle = "rgb(0, 255, 0)";
    22				ctx.arc(70, 65, 40, 0, 2*Math.PI, false);
    23				ctx.fill();
    24						// 矩形(右)
    25				ctx.strokeStyle = "rgb(255, 0, 0)";
    26				ctx.beginPath();
    27				ctx.strokeRect(150, 15, 100, 100);
    28				ctx.stroke();
    29			}
    30		</SCRIPT>
    31	</HEAD>
    32	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    33		<H1>図形の描画</H1>
    34		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130"></CANVAS>
    35	</BODY>
    36	</HTML>
    			
    10 行目

      ID 属性の値が canvas_e である HTML の要素を探し,変数 canvas に代入しています.具体的には,34 行目の CANVAS 要素が対応します.JavaScript においても,数学と同じように,定数や様々な値を保持するための変数を使用可能です.しかし,すべての変数には「型」があり,その「型」に一致した値だけをその変数に代入(記憶)可能です.そのため,C/C++,Java などにおいては,使用する変数に対して,その変数を使用する前にその変数の型を宣言しておく必要があります.しかしながら,JavaScript では,変数に対して型宣言を行う必要はありません.代入されたデータによって,自動的にその変数の型が決定されます(この行の場合は,CANVAS オブジェクト).

      例えば,変数の使用開始を明示的に宣言するには,
    	let x1 = 12345;
    	let x2;
    	var y1 = 12.5;
    	var y1;
    	z1 = 12;
    	z1;				
    のような形で変数の使用を開始すると(変数を定義すると),それ以降,その変数を使用することが出来るように(有効に,参照可能に)なります.ブロック内( { } で囲まれた部分,関数も含む)で,let を指定して定義すると,ブロック内のその変数が定義された以降で有効になります.また,関数内で,var を指定して定義すると,関数内のその変数が定義された以降で有効になります.これらの変数をローカル変数と呼びます.関数外で定義された変数,または,let や var を付加せずに定義された変数は,グローバル変数と呼ばれ,変数が定義された以降であれば,どこからでも参照可能(有効)になります.誤りの原因となりやすいので,「グローバル変数は,関数の外で let や var を付加せずに定義する,ローカル変数は,特別の理由が無い限り,var ではなく let を付加して定義する.」といった規則を守った方が良いと思います.詳細については,変数の有効範囲(スコープ)を参照してください.

    11 行目~ 12 行目

      CANVAS の幅と高さを設定しています.34 行目の CANVAS 要素に記述した値と同じにしておいた方が良いと思います.

    13 行目

      CANVAS のコンテキスト(絵筆)を取得しています.

    15 行目~ 18 行目

      矩形を描画しています.線の太さを設定し( 15 行目),現在のサブパスをリセットし( 16 行目),矩形の左上の頂点の座標が (20, 15) である幅 100,高さ 100 の矩形を描き(サブパスを生成し)( 17 行目),その輪郭を表示しています( 18 行目).

    20 行目~ 23 行目

      中心が (70, 65),半径が 40 である緑色で塗りつぶした円を描画しています.輪郭を表示する場合(上で描いた矩形)との違いに注意してください.

    25 行目~ 28 行目

      赤色の矩形を描画しています.

    32 行目

      この要素の onLoad 属性に記述された内容に従って,このファイルがロードされると,関数 draw( 09 行目~ 29 行目)が呼ばれます.関数メソッド)に対する一般的記述方法は,
    	function 関数名 (引数, ・・・) {
    		処理
    	}				
    のようになります.関数は,グローバル変数及び引数を通して渡された情報に基づき,何らかの処理を行います.値を返したい(戻り値を設定したい)場合は,return 文を使用します.

    34 行目

      CANVAS 要素です.この要素内に描画されます.

  2. もう一つの例

      この例では,正方形楕円三角形という 3 つの図形を描いています.ただし,楕円に関しては,対応するメソッドが存在しないため,後の述べるアフィン変換を使用しています.

    01	<!DOCTYPE HTML>
    02	<HTML>
    03	<HEAD>
    04		<TITLE>図形の描画</TITLE>
    05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    06		<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
    07		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    08		<SCRIPT TYPE="text/javascript">
    09			function draw() {
    10				let canvas    = document.getElementById('canvas_e');
    11				canvas.width  = 390;   // キャンバス要素の幅
    12				canvas.height = 130;   // キャンバス要素の高さ
    13				let ctx       = canvas.getContext('2d');
    14						// 塗りつぶした矩形(左)
    15				ctx.fillStyle = "rgb(0, 255, 0)";
    16				ctx.fillRect(20, 15, 100, 100);
    17						// 楕円
    18				ctx.beginPath();
    19				ctx.setTransform(1, 0, 0, 0.5, 0, 0);
    20				ctx.lineWidth = 5;
    21				ctx.strokeStyle = "rgb(255, 0, 0)";
    22				ctx.arc(190, 130, 50, 0, 2*Math.PI, false);
    23				ctx.stroke();
    24						// 三角形(右)
    25				ctx.beginPath();
    26				ctx.fillStyle = "rgb(0, 0, 0)";
    27				ctx.setTransform(1, 0, 0, 1, 0, 0)
    28				ctx.moveTo(270, 115);
    29				ctx.lineTo(370, 115);
    30				ctx.lineTo(320, 15);
    31				ctx.closePath();
    32				ctx.fill();
    33			}
    34		</SCRIPT>
    35	</HEAD>
    36	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    37		<H1>図形の描画</H1>
    38		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="390" HEIGHT="130"></CANVAS>
    39	</BODY>
    40	</HTML>
    			
    15 行目~ 16 行目

      緑で塗りつぶした矩形を描いています.

    18 行目~ 23 行目

      赤色の楕円を描いています.19 行目では,アフィン変換によって,座標軸の y 軸方向を 0.5 倍に縮小しています.

    25 行目~ 32 行目

      黒で塗りつぶした三角形を描いています.27 行目では,19 行目で行ったアフィン変換を元に戻しています.描くべき三角形の左下の頂点に移動し( 28 行目),そこから右下の頂点まで直線を描き( 29 行目),さらに,そこから上の頂点まで直線を描き( 30 行目),31 行目では始点(左下の頂点)と終点(上の頂点)を直線で結び,パスを閉じています.32 行目の fill は,サブパスを塗りつぶすメソッドです.

情報学部 菅沼ホーム JavaScript 目次 基礎技術目次 索引