Canvasに長方形を描く２
前回記事「Canvasに長方形を描く」の続きです。
ボタン操作で、Canvas上の長方形を描画し、また、消去します。
前回のプログラム
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>Draw Rectangle</title>
<script>
// ページの全要素をローディング
window.onload = function() {
// 長方形の描画準備
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 長方形の描画
context.fillStyle = "orange";
context.fillRect(100, 50, 50, 50);
}
</script>
</head>
<body>
<canvas width="300" height="200" id="canvas" style="background-color:green;"></canvas>
</body>
</html>
マジックナンバー
14行目、fillRectメソッドの引数が、マジックナンバーになっています。
引数に、数値（100とか50）を直接、記述しています。
これでは、第三者がプログラムを見たとき、100とか、50の意味は分かりません。
（注）マジックナンバーの詳しい説明は、ウィキペディアをご参照ください。
プログラムの整形
マジックナンバーをなくすよう、プログラムを整形します。
プログラム１
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>Draw Rectangle</title>
<script>
// グローバル変数
var x = 100; // 長方形の位置（x座標）
var y = 50; // 長方形の位置（y座標）
var w = 50; // 長方形の横幅
var h = 50; // 長方形の高さ
// ページの全要素をローディング
window.onload = function() {
// 長方形の描画準備
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 長方形の描画
context.fillStyle = "orange";
context.fillRect(x, y, w, h);
}
</script>
</head>
<body>
<canvas width="300" height="200" id="canvas" style="background-color:green;"></canvas>
</body>
</html>
グローバル変数とローカル変数
グローバル変数
19行、fillRectメソッドの引数（x, y, w, h）を、グローバル変数で定義することで、マジックナンバーではなくなっています。
グローバル変数は、全ての関数の外側で宣言します。
そのため、グローバル変数は、全ての関数から参照が可能となります。
ローカル変数
グルーバル変数ではない変数は、ローカル変数です。
ローカル変数は、ある関数の内部で宣言します。
そのため、ローカル変数は、その関数の中でしか使用できません。
（注）上記、グローバル変数（ローカル変数）の定義は、JavaScript独自の定義です。
詳しくは、MDNをご参照ください。
長方形の描画
[draw]ボタンをクリックすると、長方形を描画するようにします。
プログラム2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>Draw Rectangle</title>
<script>
// グローバル変数
var x = 100; // 長方形の位置（x座標）
var y = 50; // 長方形の位置（y座標）
var w = 50; // 長方形の横幅
var h = 50; // 長方形の高さ
var context; // コンテキスト
// ページの全要素をローディング
window.onload = function() {
// 長方形の描画準備
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
}
function drawRectangle() {
// 長方形の描画
context.fillStyle = "orange";
context.fillRect(x, y, w, h);
}
</script>
</head>
<body>
<canvas width="300" height="200" id="canvas" style="background-color:green;"></canvas>
<br>
<input type="button" value="draw" onclick="drawRectangle()">
</body>
</html>
[draw]ボタン
30行目にinputタグを記述しています。
<input type="button" value="draw" onclick="drawRectangle()">
inputタグの属性
- type: “button”
- value： “draw” ボタンに文字列「draw」が書かれる
- onclick： drawRectangle() クリックすると関数が動く
描画関数
プログラム1の「長方形の描画」部分、18-19行を関数にしました。
関数名は、drawRectangleとしました。
function drawRectangle() {
// 長方形の描画
context.fillStyle = "orange";
context.fillRect(x, y, w, h);
}
長方形の消去
[clear]ボタンをクリックすると、長方形を消去するようにします。
プログラム3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>Draw Rectangle</title>
<script>
// グローバル変数
var x = 100; // 長方形の位置（x座標）
var y = 50; // 長方形の位置（y座標）
var w = 50; // 長方形の横幅
var h = 50; // 長方形の高さ
var context; // コンテキスト
// 長方形の描画準備
window.onload = function() {
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
}
// 長方形の描画
function drawRectangle() {
context.fillStyle = "orange";
context.fillRect(x, y, w, h);
}
// 長方形の消去
function clearRectangle() {
context.clearRect(x, y, w, h);
}
</script>
</head>
<body>
<canvas width="300" height="200" id="canvas" style="background-color:green;"></canvas>
<br>
<input type="button" value= "draw" onclick= "drawRectangle()">
<input type="button" value="clear" onclick="clearRectangle()">
</body>
</html>
[clear]ボタン
33行目のinputタグで[clear]ボタンを記述しています。
[clear]ボタンをクリックすると、clearRectangle()関数が動きます。
消去関数
23-26行で、関数clearRectangle()を定義しています。
function clearRectangle() {
context.clearRect(x, y, w, h);
}
長方形の消去は、contextのclearRectメソッドを使います。
引数の意味は、drawRectメソッドと同様です。
