2016.2.4510 views

canvasタグで猫型ロボット描いてみた

「HTML5のcanvas要素は、JavaScriptを用いて、ブラウザ上にビットマップ画像が描画できる」
ということを聞いたのは、今から2年前のことでした。
HTML5とJavaScriptの勉強を始めたばかりだった当時、練習半分、遊び半分で描いてみたのが、下の某猫型ロボットです。

画像を表示するには、canvasタグをサポートしたブラウザが必要です。

円と直線の組み合わせだから簡単に描けるに違いない、と舐めて取り掛かかり、2時間後ヘロヘロになりながら仕上げたのも、今では良い思い出です(´∀`;)
ちなみにソースはこんな感じです。

onload = function() {
	draw();
};
function draw() {
	var canvas = document.getElementById('dora');
	if ( ! canvas || ! canvas.getContext ) { return false; }
	var ctx = canvas.getContext('2d');
	ctx.lineWidth = 1;
//	顔1
	ctx.beginPath();
	ctx.arc(250, 200, 150, 0, Math.PI*2, false);
	ctx.fillStyle = '#87ceeb' ;
	ctx.fill();
	ctx.stroke();
//	顔2
	ctx.scale(1.2,1);
	ctx.beginPath();
	ctx.arc(209, 238, 112, 0, Math.PI*2, false);
	ctx.fillStyle = '#fff' ;
	ctx.fill();
	ctx.stroke();
//	左白目
	ctx.beginPath();
	ctx.scale(1, 1.4);
	ctx.arc(176, 100, 35, 0, Math.PI*2, false);
	ctx.fillStyle = '#fff' ;
	ctx.fill();
	ctx.stroke();
//	右白目
	ctx.beginPath();
	ctx.arc(245, 100, 35, 0, Math.PI*2, false);
	ctx.fillStyle = '#fff' ;
	ctx.fill();
	ctx.stroke();
//	左黒目
	ctx.beginPath();
	ctx.scale(1, 1.2);
	ctx.arc(200, 85, 7, 0, Math.PI*2, false);
	ctx.fillStyle = '#000' ;
	ctx.fill();
//	右黒目
	ctx.beginPath();
	ctx.arc(270, 85, 7, 0, Math.PI*2, false);
	ctx.fillStyle = '#000' ;
	ctx.fill();
//	左目ハイライト
	ctx.beginPath();
	ctx.arc(202, 82, 3, 0, Math.PI*2, false);
	ctx.fillStyle = '#fff' ;
	ctx.fill();
//	右目ハイライト
	ctx.beginPath();
	ctx.arc(272, 82, 3, 0, Math.PI*2, false);
	ctx.fillStyle = '#fff' ;
	ctx.fill();
//	左ひげ
	ctx.beginPath();
	ctx.moveTo(160, 118);
	ctx.lineTo(90, 105);
	ctx.moveTo(160, 128);
	ctx.lineTo(90, 129);
	ctx.moveTo(160, 138);
	ctx.lineTo(90, 155);
	ctx.stroke();
//	右ひげ
	ctx.beginPath();
	ctx.moveTo(260, 118);
	ctx.lineTo(330, 105);
	ctx.moveTo(260, 128);
	ctx.lineTo(330, 129);
	ctx.moveTo(260, 138);
	ctx.lineTo(330, 155);
	ctx.stroke();
//	鼻
	ctx.beginPath();
	ctx.scale(1.4, 1);
	ctx.arc(150, 113, 12, 0, Math.PI*2, false);
	ctx.fillStyle = '#f00' ;
	ctx.fill();
	ctx.stroke();
//	鼻ハイライト
	ctx.beginPath();
	ctx.arc(155, 107, 4, 0, Math.PI*2, false);
	ctx.fillStyle = '#fff' ;
	ctx.fill();
//	鼻の下
	ctx.beginPath();
	ctx.moveTo(150, 125);
	ctx.lineTo(150, 178);
	ctx.stroke();
//	口
	ctx.beginPath();
	ctx.moveTo(100, 135);
	ctx.quadraticCurveTo(65, 150, 110, 170);
	ctx.moveTo(110, 170);
	ctx.quadraticCurveTo(165, 190, 215, 155);
	ctx.stroke();
//	首輪
	ctx.beginPath();
	ctx.arc(113, 205, 7, 135*Math.PI/180, 225*Math.PI/180, false);
	ctx.arc(185, 205, 7, 315*Math.PI/180, 45*Math.PI/180, false);
	ctx.lineTo(108, 210);
	ctx.fillStyle = '#f00' ;
	ctx.fill();
	ctx.stroke();
//	鈴1
	ctx.beginPath();
	ctx.arc(149, 213, 10, 0, Math.PI*2, false);
	ctx.fillStyle = '#ff0' ;
	ctx.fill();
	ctx.stroke();
//	鈴2
	ctx.beginPath();
	ctx.moveTo(140, 208);
	ctx.lineTo(158, 208);
	ctx.moveTo(139, 211);
	ctx.lineTo(159, 211);
	ctx.moveTo(149, 217);
	ctx.lineTo(149, 223);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(149, 217, 2, 0, Math.PI*2, false);
	ctx.fillStyle = '#000' ;
	ctx.fill();
}

・・・まだまだ練習が必要です(´・ω・`)

written by:じゃみ