Canvasに長方形を描く2

前回記事「Canvasに長方形を描く」の続きです。
ボタン操作で、Canvas上の長方形を描画し、また、消去します。


前回のプログラム

 

マジックナンバー

14行目、fillRectメソッドの引数が、マジックナンバーになっています。

引数に、数値(100とか50)を直接、記述しています。

これでは、第三者がプログラムを見たとき、100とか、50の意味は分かりません。

(注)マジックナンバーの詳しい説明は、ウィキペディアをご参照ください。

 

プログラムの整形

マジックナンバーをなくすよう、プログラムを整形します。

 

プログラム1

 

グローバル変数とローカル変数

グローバル変数

19行、fillRectメソッドの引数(x, y, w, h)を、グローバル変数で定義することで、マジックナンバーではなくなっています。

グローバル変数は、全ての関数の外側で宣言します。

そのため、グローバル変数は、全ての関数から参照が可能となります。

 

ローカル変数

グルーバル変数ではない変数は、ローカル変数です。

ローカル変数は、ある関数の内部で宣言します。

そのため、ローカル変数は、その関数の中でしか使用できません。

 

(注)上記、グローバル変数(ローカル変数)の定義は、JavaScript独自の定義です。

詳しくは、MDNをご参照ください。

 

 

長方形の描画

[draw]ボタンをクリックすると、長方形を描画するようにします。

 

プログラム2

 

[draw]ボタン

30行目にinputタグを記述しています。

 

inputタグの属性

  • type: “button”
  • value: “draw”      ボタンに文字列「draw」が書かれる
  • onclick: drawRectangle()  クリックすると関数が動く

 

 

描画関数

プログラム1の「長方形の描画」部分、18-19行を関数にしました。

関数名は、drawRectangleとしました。

 

 

 

長方形の消去

[clear]ボタンをクリックすると、長方形を消去するようにします。

 

 

プログラム3

 

[clear]ボタン

33行目のinputタグで[clear]ボタンを記述しています。

[clear]ボタンをクリックすると、clearRectangle()関数が動きます。

 

消去関数

23-26行で、関数clearRectangle()を定義しています。

長方形の消去は、contextのclearRectメソッドを使います。

引数の意味は、drawRectメソッドと同様です。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。