読者です 読者をやめる 読者になる 読者になる

目標は商店街をつくる事なんです。

あきらめてるわけじゃないんです。今やっていることが、必ず力になると思うんです。

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

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

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



前回まで、

◎ひまつぶしアプリ face

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




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


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

(全然まとまってないですが・・・)


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





② face.js

f:id:itakanaya9:20131014191858p:plain


ここでは、上の関数の中で、
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() : 目が飛び出す処理

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