図形の描画(JavaScript)

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 要素です．この要素内に描画されます．

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>