JavaScript超入門2019 #11 関数の引数

　前回で、プログラム上の不明個所は無くなりました。ですので今回は試しに処理を増やして遊んでみたいと思います。文を１行表示するだけでは、つまらないですからね。試しに、７行目をコピペしてみます。そして、「こんにちは世界」の部分をテキトーに変えてみます。

window.onload = function( ev )                      //  ブラウザloadイベントに関数を設定
{                                                   //  関数の始まり
    const   ca = document.getElementById( 'main' ); //  変数caを宣言し、ブラウザ要素を代入
    const   g = ca.getContext( '2d' );              //  変数gを宣言し、ブラウザ要素の描画コンテキストを代入
    g.font = "40px monospace";                      //  変数gの書体を40ドットへ
    g.fillStyle = "#ff0000";                        //  変数gの描画色を赤へ
    g.fillText( "こんにちは世界", 40, 80 );         //  変数gへ文字列を描画
    g.fillText( "さようなら皆さん", 40, 80 );       //  変数gへ文字列を描画
}                                                   //  関数の終わり

　ペーストした行のメッセージ内容を「さようなら皆さん」に変更してみました。これでブラウザを起動してみると、

という感じで、文字が重なってしまい上手く表示されません。コピペしただけじゃダメだということですね。

引数

void ctx.fillText(text, x, y [, maxWidth]);

void ctx.fillText(      text       , x , y  [, maxWidth]);

      g .fillText( "こんにちは世界", 40, 80             );

　カンマ(,)の位置などを揃えて記述してみると、こんな感じになります。そして、Mozillaマニュアルの「引数」欄を見てみると、

text
  現在の font、textAlign、textBaseline、direction の値を使用して描画するテキスト。

x
  テキストの描画を始める、x 軸の座標。

y
  テキストの描画を始める、y 軸の座標。

と書かれているので分かりますよね？　それぞれ
　text : "こんにちは世界"
　x : 40
　y : 80
に対応しています。このように、関数のカッコの中に記述されているものを、「関数の引数」と言います。ちなみに、「fillText」部分は「関数名」といいます。そして、関数名は当然ながら固定なのですが、関数の引数については、使用する側が好きなように値を決めることが出来る、というわけです。

　今回の目的は、２つの文の描画位置をずらすということでしたよね。Y座標の値を変更すれば解決しそうです。

window.onload = function( ev )                      //  ブラウザloadイベントに関数を設定
{                                                   //  関数の始まり
    const   ca = document.getElementById( 'main' ); //  変数caを宣言し、ブラウザ要素を代入
    const   g = ca.getContext( '2d' );              //  変数gを宣言し、ブラウザ要素の描画コンテキストを代入
    g.font = "40px monospace";                      //  変数gの書体を40ドットへ
    g.fillStyle = "#ff0000";                        //  変数gの描画色を赤へ
    g.fillText( "こんにちは世界", 40, 80 );         //  変数gへ文字列を描画
    g.fillText( "さようなら皆さん", 40, 130 );      //  変数gへ文字列を描画
}                                                   //  関数の終わり

　１つ注意点として、この「座標」については、原点(0,0)が領域左上に存在するということです。そして、Y軸は下に向かって増えていきます。数学と上下が逆なので最初のうちは戸惑うかもしれませんが、まあすぐに慣れると思います。

　ちなみに、座標の最大値は(640,360)ですが、この値はindex.htmlの10行目に記述した、

<canvas id="main" width="640" height="360" style="background-color:#0000ff;"></canvas>

の、「width="640"」「height="360"」の部分で指定した値になります。ここの数字を変えれば、ブラウザ上の青領域の大きさが変化するので試してみて下さい。

#11 関数の引数

コピペプログラミング

引数