静岡理工科大学 菅沼ホーム JavaScript 目次 基礎技術目次 索引

図形の描画

  1. 描画方法

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

      JavaScript において,図形を描画したりアニメーションを実行するためには,CANVAS 要素を利用します.具体的には,「 DOM 及び CANVAS 関係の JavaScript のプロパティとメソッド」における「パスの生成と描画」,「Line,fill,stroke スタイル」などを利用することになります.この例では,strokeRect メソッドと arc メソッドを利用して,矩形塗りつぶした円を描いています.08 行目~ 28 行目は,「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		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    07		<SCRIPT TYPE="text/javascript">
    08			function draw() {
    09				var canvas    = document.getElementById('canvas_e');
    10				canvas.width  = 270;   // キャンバス要素の幅
    11				canvas.height = 130;   // キャンバス要素の高さ
    12				var ctx       = canvas.getContext('2d');
    13						// 矩形(左)
    14				ctx.lineWidth = 5;
    15				ctx.beginPath();
    16				ctx.strokeRect(20, 15, 100, 100);
    17				ctx.stroke();
    18						// 塗りつぶした円
    19				ctx.beginPath();
    20				ctx.fillStyle = "rgb(0, 255, 0)";
    21				ctx.arc(70, 65, 40, 0, 2*Math.PI, false);
    22				ctx.fill();
    23						// 矩形(右)
    24				ctx.strokeStyle = "rgb(255, 0, 0)";
    25				ctx.beginPath();
    26				ctx.strokeRect(150, 15, 100, 100);
    27				ctx.stroke();
    28			}
    29		</SCRIPT>
    30	</HEAD>
    31	<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
    32		<H1>図形の描画</H1>
    33		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130"></CANVAS>
    34	</BODY>
    35	</HTML>
    			
    09 行目

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

      例えば,変数の使用開始を明示的に宣言するには,
      var x = 12345;
      var y = "abc";
      				
    のように,var を使用します.var は,省略可能ですが,この行のように関数内で変数の使用開始を宣言した場合と,この例では存在しませんが関数外で使用開始を宣言した場合とでは,多少意味が異なってきます.関数外で宣言した場合は,どこで宣言しても,また,var を省略してもしなくても,グローバル変数(すべての関数から参照可能な変数)とみなされます.関数内で var を使用して宣言した場合は,その変数はローカル変数(その変数が定義された関数またはブロック内だけで参照可能な変数)とみなされ,var を省略した場合は,その変数に値を設定した以降であれば,他の関数からも参照可能なグローバル変数のような動きをします.ただし,紛らわしさを除くためには,グローバル変数はすべて関数外で宣言した方が良いと思います.

    10 行目~ 11 行目

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

    12 行目

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

    14 行目~ 17 行目

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

    19 行目~ 22 行目

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

    24 行目~ 27 行目

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

    31 行目

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

    33 行目

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

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

    17 行目~ 22 行目

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

    24 行目~ 31 行目

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

静岡理工科大学 菅沼ホーム JavaScript 目次 基礎技術目次 索引