俺らのWebはジャスティス

あ・美脚ハンター、クロケツ♂、ダーク・イザワ、ぜん☆ちからめしの4人が運営していくWeb技術、デザインの情報ブログです

HTML5のcanvasは簡単?使用したことのない学生が使ってみる。

javascript

HTML5の新機能「Canvas」機能を使って何かしてみたいと思い、せっかくなのでハロゥインのカボチャでも作るか！
ということで制作してみました。

参考にさせていただいたサイトはこちら。
次世代HTML標準 HTML5情報サイトのCanvaのページです。

材料をそろえる。

「Canvas」を使用するのに必要なhtmlとjsと思いやりの心をフォルダに入れます。
また、CanvasはIEには対応していないので、IEに対応させるためのJSファイルExplorerCanvasをダウンロードしてJSと同じフォルダにでも入れておきましょう。

土台を作る。

HTMLにはこのように準備をしておきます。

<!DOCTYPE HTML>
<html lang="ja">
<head>

<meta charset="utf-8">
<title>canvasを使ってみる</title>
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<link href="css/base.css" type="text/css" rel="stylesheet">
<script src="js/base.js"></script>

</head>
<body>
<div id="wrapper">
	<h1>ハロウインのカボチャつくるおっおっ(＾ω＾≡＾ω＾)</h1>
		<canvas id="pumpkin" width="300" height="300"></canvas>
<!--wrapper--></div>
</body>
</html>


canvasのサイズをwidthとheightで指定してあげましょう。
idは後でJSのDOMで取得し、表示するために使うので、適当な名前を付けておきましょう。
見出しは後で作るカボチャの物にしてあります。気にしないでください。

javascriptで描写してみる。

まずはじめに簡単な四角でも描いてみようと思い、jsを書きました。

window.onload = function() {
//windowが読み込まれたらdraw();を実行する
  draw();
};

function draw() {
//canvasを描写するところを取ってくる。
  var canvas = document.getElementById('pumpkin');

//canvas要素の存在チェックとCanvas未対応ブラウザの対処 
if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var square = canvas.getContext('2d');
  //描きはじめの宣言
  square.beginPath();
  //描きはじめの場所
  square.moveTo(0, 0);
  //引きたい線の終点
  square.lineTo(300, 0);
  //次の終点
  square.lineTo(300, 300);
  //次の終点
  square.lineTo(0, 300);
  //描写した線を閉じる。
  square.closePath();
  //できた線を描写！これを入れないと線は出ません。
  square.stroke();
  
}

f:id:orewebe:20121025220254j:plain

これで四角がかけました。
四角を描いたものを応用して、今度はそこからカボチャを作ってみたいと思います。


応用：canvasでハロウィンのカボチャを作ってみる。

今回使う構文


    

  • hoge.beginPath()
    • 

　現在のパスをリセットする


    

  • hoge.moveTo(x, y)
    • 

　新しいパスを生成する。


    

  • hoge.lineTo(x, y)
    • 

　直前の座標から現在の座標まで直線でつなげる。


    

  • hoge.quadraticCurveTo(制御点の座標X,制御点の座標Y, 次の座標X, 次の座標Y)
    • 

　直前の座標から、制御点を伴う二次曲線で現在の座標までをつなげる。


    

  • hoge.fillStyle="色"
    • 

　そこまでに繋がっている線の中を塗りつぶします。


    

  • hoge.fill()
    • 

　上記で色を塗りつぶすにしたところを終わらせます。


    

  • hoge.closePath()
    • 

　開いているパスを閉じます。

1.ハロウィンのかぼちゃになる形を大まかにとっていきます。

まずはじめにcanvasの初期設定となる所を作っていきます。

window.onload = function() {
  draw();
};


function draw() {
//canvasを描写するところを取ってくる。

  var canvasPumpkin = document.getElementById('pumpkin');
 
//canvas要素の存在チェックとCanvas未対応ブラウザの対処 
if ( ! canvasPumpkin || ! canvasPumpkin.getContext ) {
    return false;
  }
  
var pumpkin = canvasPumpkin.getContext('2d');
}

これで初期設定は完成です。
次に描きはじめの座標を決めて、それを変数に入れます。


window.onload = function() {
  draw();
};


function draw() {
//canvasを描写するところを取ってくる。

  var canvasPumpkin = document.getElementById('pumpkin');
 
//canvas要素の存在チェックとCanvas未対応ブラウザの対処 
if ( ! canvasPumpkin || ! canvasPumpkin.getContext ) {
    return false;
  }
  
var pumpkin = canvasPumpkin.getContext('2d');
//開始位置の座標を設定
var pumpX =40;
var pumpY =50;

}

f:id:orewebe:20121024225052j:plain
変数位に入れることで、あとで位置を移動したくなった時に変数に数値を入れるだけで場所の移動をしてくれます。


f:id:orewebe:20121025153937p:plain
※始めの点になるので、これよりも左側に描写するものがあるのであれば、その分だけ＋しておかないと見えなくなってしまいます。


これをどんどん続けて、線を描写していきます。
すべてが終わったときのソースが下記です。

window.onload = function() {
  draw();
};

function draw() {
//canvasを描写するところを取ってくる。

  var canvasPumpkin = document.getElementById('pumpkin');
 
//canvas要素の存在チェックとCanvas未対応ブラウザの対処 
if ( ! canvasPumpkin || ! canvasPumpkin.getContext ) {
    return false;
  }
  
var pumpkin = canvasPumpkin.getContext('2d');

var pumpX =40;
var pumpY =50;


	pumpkin.moveTo(pumpX, pumpY);
	pumpkin.lineTo(pumpX+40, pumpY-35);
	pumpkin.lineTo(pumpX+60, pumpY-25);
	pumpkin.lineTo(pumpX+140,pumpY-25);
	pumpkin.lineTo(pumpX+160, pumpY-35);
	pumpkin.lineTo(pumpX+200, pumpY);
	pumpkin.lineTo(pumpX+160, pumpY+100);
	pumpkin.lineTo(pumpX+120, pumpY+90);
	pumpkin.lineTo(pumpX+80, pumpY+90);
	pumpkin.lineTo(pumpX+40, pumpY+100);
	pumpkin.lineTo(pumpX, pumpY);
	pumpkin.stroke();

}

f:id:orewebe:20121028155311j:plain

はじめに周りを型取り、基準になる座標を決めておくことで後々で二次曲線を描くときの基準点になるので楽です。

2.hoge.quadraticCurveTo(制御点の座標X,制御点の座標Y, 次の座標X, 次の座標Y)

hoge.quadraticCurveTo()を使用して、現在カクカクになっている線をなめらかにしていきます。
ここでうまくなめらかな形にするには、両方の座標の中心を考えてあげることです。
そこに沿うように曲線が描かれます。
f:id:orewebe:20121024231625j:plain
ここでの線のソースコードはこのようになります

window.onload = function() {
  draw();
};

function draw() {
//canvasを描写するところを取ってくる。

  var canvasPumpkin = document.getElementById('pumpkin');
 
//canvas要素の存在チェックとCanvas未対応ブラウザの対処 
if ( ! canvasPumpkin || ! canvasPumpkin.getContext ) {
    return false;
  }
  
var pumpkin = canvasPumpkin.getContext('2d');

var pumpX =40;
var pumpY =50;

	pumpkin.moveTo(pumpX, pumpY);
	pumpkin.quadraticCurveTo(pumpX,pumpY-20, pumpX+40, pumpY-35);
	pumpkin.quadraticCurveTo(pumpX+60,pumpY-40, pumpX+60, pumpY-25);
	pumpkin.quadraticCurveTo(pumpX+100,pumpY-55, pumpX+140,pumpY-25);
	pumpkin.quadraticCurveTo(pumpX+150,pumpY-40, pumpX+160, pumpY-35);
	pumpkin.quadraticCurveTo(pumpX+200,pumpY-20, pumpX+200, pumpY);
	pumpkin.quadraticCurveTo(pumpX+180,pumpY+100, pumpX+160, pumpY+100);
	pumpkin.lineTo(pumpX+120, pumpY+90);
	pumpkin.quadraticCurveTo(pumpX+100,pumpY+100, pumpX+80, pumpY+90);
	pumpkin.lineTo(pumpX+40, pumpY+100);
	pumpkin.quadraticCurveTo(pumpX+20,pumpY+100, pumpX, pumpY);
	pumpkin.closePath();
	pumpkin.stroke();

}

f:id:orewebe:20121024232144j:plain

3.色を付ける。

hoge.fillStyle="value"をパスをリセットした後に入れて、最後にパスを閉じてから、hoge.fill()を記述します。

window.onload = function() {
  draw();
};

function draw() {
//canvasを描写するところを取ってくる。

  var canvasPumpkin = document.getElementById('pumpkin');
 
//canvas要素の存在チェックとCanvas未対応ブラウザの対処 
if ( ! canvasPumpkin || ! canvasPumpkin.getContext ) {
    return false;
  }
  
var pumpkin = canvasPumpkin.getContext('2d');

var pumpX =40;
var pumpY =50;

	pumpkin.fillStyle = "#f79328";
	pumpkin.moveTo(pumpX, pumpY);
	pumpkin.quadraticCurveTo(pumpX,pumpY-20, pumpX+40, pumpY-35);
	pumpkin.quadraticCurveTo(pumpX+60,pumpY-40, pumpX+60, pumpY-25);
	pumpkin.quadraticCurveTo(pumpX+100,pumpY-55, pumpX+140,pumpY-25);
	pumpkin.quadraticCurveTo(pumpX+150,pumpY-40, pumpX+160, pumpY-35);
	pumpkin.quadraticCurveTo(pumpX+200,pumpY-20, pumpX+200, pumpY);
	pumpkin.quadraticCurveTo(pumpX+180,pumpY+100, pumpX+160, pumpY+100);
	pumpkin.lineTo(pumpX+120, pumpY+90);
	pumpkin.quadraticCurveTo(pumpX+100,pumpY+100, pumpX+80, pumpY+90);
	pumpkin.lineTo(pumpX+40, pumpY+100);
	pumpkin.quadraticCurveTo(pumpX+20,pumpY+100, pumpX, pumpY);
	pumpkin.closePath();
	pumpkin.fill();
	pumpkin.stroke();

}

f:id:orewebe:20121024232154j:plain

4.線を消す。

そして最後に、線として周りの線の描写(square.stroke())を消して、あげると、canvasを使ったカボチャの完成です。

f:id:orewebe:20121028154834j:plain

カボチャのソースコード全部

目と口を追加しました。

f:id:orewebe:20121024232509j:plain

window.onload = function() {
  draw();
};


function draw() {
//canvasを描写するところを取ってくる。

  var canvasPumpkin = document.getElementById('pumpkin');
 
//canvas要素の存在チェックとCanvas未対応ブラウザの対処 
if ( ! canvasPumpkin || ! canvasPumpkin.getContext ) {
    return false;
  }
  
var pumpkin = canvasPumpkin.getContext('2d');

	//カボチャの位置
	var pumpX =40;
	var pumpY =50;

	//カボチャ
	pumpkin.beginPath();
	pumpkin.fillStyle = "#f79328";
	pumpkin.moveTo(pumpX, pumpY);
	pumpkin.quadraticCurveTo(pumpX,pumpY-20, pumpX+40, pumpY-35);
	pumpkin.quadraticCurveTo(pumpX+60,pumpY-40, pumpX+60, pumpY-25);
	pumpkin.quadraticCurveTo(pumpX+100,pumpY-55, pumpX+140,pumpY-25);
	pumpkin.quadraticCurveTo(pumpX+150,pumpY-40, pumpX+160, pumpY-35);
	pumpkin.quadraticCurveTo(pumpX+200,pumpY-20, pumpX+200, pumpY);
	pumpkin.quadraticCurveTo(pumpX+180,pumpY+100, pumpX+160, pumpY+100);
	pumpkin.lineTo(pumpX+120, pumpY+90);
	pumpkin.quadraticCurveTo(pumpX+100,pumpY+100, pumpX+80, pumpY+90);
	pumpkin.lineTo(pumpX+40, pumpY+100);
	pumpkin.quadraticCurveTo(pumpX+20,pumpY+100, pumpX, pumpY);
	pumpkin.closePath();
	pumpkin.fill();

	//口
	var mouseX =pumpX+40;
	var mouseY =pumpY+45;
	
	pumpkin.beginPath();
	pumpkin.fillStyle = "#fff";	
	pumpkin.moveTo(mouseX, mouseY);
	pumpkin.lineTo(mouseX+20, mouseY);
	pumpkin.lineTo(mouseX+20, mouseY+5);
	pumpkin.lineTo(mouseX+40, mouseY+5);
	pumpkin.lineTo(mouseX+40, mouseY);
	pumpkin.lineTo(mouseX+80, mouseY);
	pumpkin.lineTo(mouseX+80, mouseY+5);
	pumpkin.lineTo(mouseX+100, mouseY+5);
	pumpkin.lineTo(mouseX+100, mouseY);
	pumpkin.lineTo(mouseX+120, mouseY);
	pumpkin.quadraticCurveTo(mouseX+60,mouseY+50, mouseX, mouseY);
	pumpkin.closePath();
	pumpkin.fill();

	//左目
	var eyelX =pumpX+30;
	var eyelY =pumpY+20;
	
	//右目
	var eyerX =pumpX+130;
	var eyerY =pumpY+20;

//引数を使って左目と右目を作ります。
function eyes(eyeX,eyeY){
	pumpkin.beginPath();
	pumpkin.fillStyle = "#fff";
	pumpkin.moveTo(eyeX, eyeY);
	pumpkin.quadraticCurveTo((eyeX+20),(eyeY-20), (eyeX+40), eyeY);
	pumpkin.lineTo(eyeX, eyeY);
	pumpkin.closePath();
	pumpkin.fill();
	}
	
	eyes(eyelX,eyelY);
	eyes(eyerX,eyerY);
	
}

このように使っていけば、いろいろな形が作れますね！
今回作ったのは単純な図形ですが、これを生かして動的にしていけばもっといろいろな表現が広がりますね！！！