faceの作り方② [face.js] canvas/context

おはようございます。いたかなやです。

今日も来て頂いてありがとうございます。

前回まで、

◎ひまつぶしアプリ face

◎ faceの作り方① ( index.html )

今回は、第３回、
faceの作り方② [face.js] canvas/context
です。

htmlで作成したcanvas上に、絵を描く処理をまとめときたいと思います。

（全然まとまってないですが・・・）

勉強中の身ですので、沢山のご指摘をいただければありがたく思います。

② face.js

ここでは、上の関数の中で、
getCt() 〜 eyes(x,y,r) までの解説をしていきたいと思います。

解説っていってもやってる事は同じなんです。

とりあえず、コードです。

function getCt(){//コンテキスト取得
	var canvas = document.getElementById("canvas");
	return canvas.getContext("2d");//countext
}

function clearCanvas(){//キャンバス初期化
	var ct = getCt();
		ct.clearRect(0,0,400,400);
}

function label(){//「face」表示
	var ct = getCt();
		ct.font = "30pt Impact";
		ct.fillStyle = "white";
		ct.fillText("face", 300, 380);	
}

function place(x,y){//座標の表示
	var ct = getCt();
		ct.font = "10pt Impact";
		ct.fillStyle = "white";
		ct.fillText(x, 20, 20);
		ct.fillText(y, 50, 20);	
}

function face(){//顔の作成
	var ct = getCt();
		ct.strokeStyle = 'white';
		ct.beginPath(); //輪郭の作成
			ct.moveTo(250,200);
			ct.arc(200,200, 50, 0, Math.PI*2, false);
		ct.stroke();
		ct.beginPath(); //口の作成
			ct.moveTo(165,230);//口
			ct.lineTo(165,200);
			ct.lineTo(235,200);
			ct.lineTo(235,230);
			ct.lineTo(165,230);
			ct.lineTo(175,200);//歯
			ct.lineTo(185,230);
			ct.lineTo(195,200);
			ct.lineTo(205,230);
			ct.lineTo(215,200);
			ct.lineTo(225,230);
			ct.lineTo(235,200);
		ct.stroke();
		ct.beginPath();  //右目の作成
			ct.lineTo(199,180);
			ct.arc(180,180, 19, 0, Math.PI*2, false);
		ct.stroke();
		ct.beginPath();  //左目の作成
			ct.lineTo(239,180);
			ct.arc(220,180, 19, 0, Math.PI*2, false);
		ct.stroke();		
}

function eyes(x,y,r){//目の作成
	var ct = getCt();
		ct.beginPath();
		ct.fillStyle = "white";
			ct.moveTo(x,y);
			ct.arc(x,y,r, 0, Math.PI*2, false);
		ct.fill();		
}

大事なのは、
getCt()です。

ここで、紹介している全ての関数の最初に出てきています。

キャンバス上に、絵を描くとき、

まずHTMLで指定したキャンバスのIDを取得し、（var canvas に代入）
var canvas = document.getElementById("canvas");

そのキャンバスのコンテキストを取得してから、（ここでは、戻り値に設定している。）
return canvas.getContext("2d");

描く！という流れになります。

コンテキストは、筆のようなものだと思ったら良いのかなぁ！？・・・

他の関数内の一行目が、

var ct = getCt();

となっているのは、

毎回コンテキストを取得するというのを、まとめているだけです。

以下、このctが良く出てくると思いますが、ココで、取得したコンテキストだと思って下さい。

以下、コンテキストの使い方です。

ct.clearRect(0,0,400,400);
キャンバスのクリア（初期化）です。
ココで使用しているキャンバスは、縦×横が、400×400 なので、引数がこのようになっています。

ct.font = "30pt Impact";
コレから描く文字の大きさ（30pt）とフォント（Impact）を指定しています。

ct.fillStyle = "white";
コレから描く文字の色（white）を指定しています。

ct.fillText("face", 300, 380);
「face」という文字を描いています。
fillText( 出力文字列 , 開始X座標 , 開始Y座標 )

ct.beginPath();
パスを始めます。パスを初期化します。

ct.moveTo(250,200);
始点を決定します。x=250 , y=200

ct.arc(200,200, 50, 0, Math.PI*2, false);
中心が、(200,200）で半径が、50 の円を描きます。

ct.stroke();
実際に線を描画する。（これがないと描画されない）

ct.lineTo(165,200);
設定されている始点（ct.moveTo)から指定した点（165,200）まで直線を引きます。

ct.strokeStyle = 'white';
線の色を設定します。

ct.fill();
塗りつぶします。

今日出てきたのは、これくらいでしょうか？

好きな絵をキャンバスに描くのは、けっこー面白いです。

次回は、

shotEye() : 目が飛び出す処理

を紹介したいと思います。