Loading
loading..

HTML5の面白要素3【canvas要素】(HTML5認定試験対策)

 2014年10月22日 HTML5/CSS3 javascript/jQuery 技術的なこと
インスピレーションWORDS


HTML5の新要素の花形、canvas要素を紹介します。
HTML5認定試験のレベル1では細かいことは問われないですが、試験範囲ではあります。
HTML5認定試験対策講座
canvas要素はその名の通り、絵を描くための要素です。
それまで画像を読み込むしか無かったのですが、canvas要素にjavascriptを使って、
動的な2次元ビットマップ画像を表現します。

javascriptを通じて、お絵かきアプリなんかも作ることができます。
簡単に言えば、マウスのクリックイベントの際に、クリックされた座標を取得しそこに丸を描いて、お絵かきを実現しています。
下記にサンプルがありますが、すんごいテキトーに作ったので、クリック座標が上手く取得できていません。
画面のスクロールを考慮しなくてはいけないですね。また、タッチ対応はしてません。

//javascript(jQueryを使ったほうが綺麗で楽)

var mouseDown = false;
var penX = 0;
var penY = 0;
var penWidth = 10;
var ctx;
function draw(){
	if (!ctx){
		var canvas = document.getElementById('canvas1');
		ctx = canvas.getContext('2d');
	}
	ctx.beginPath();
	ctx.fillStyle = "#000";
	ctx.arc(penX, penY, penWidth, 0, Math.PI*2, false);
	ctx.fill();
}
function onMouseMove(event){
	//マウスボタンを押している場合は描画する
	if (mouseDown){
		//マウス座標とCanvasの座標を適当に調整
		penX = event.clientX - 30 ;
		penY = event.clientY - 40;
		draw();
	}
}
function onMouseDown(b){
	mouseDown = b;
}
HTML

<canvas id="canvas1" width="250" height="250"onmousemove="onMouseMove(event)"onmouseout="onMouseDown(false)"onmouseup="onMouseDown(false)"onmousedown="onMouseDown(true)" style="border:1px solid #000;"></canvas>


☆☆ここが隠れるくらいスクロールしてください。

またこのインスピレーションWORDSもcanvasで制作しました。
オブジェクト指向的にプロパティを持たせて、ボールを一つ一つ描きます。
また、進行方向のプロパティを持っているので、0.3秒ごとに進行方向に動かしています。
他のボールと場所が重なったらプロパティとして持っていた言葉が組み合わさって、ボールの座標を取得しそれをHTMLのDIV要素に記述して出現させています。
はじにぶつかったりしたら、進行方向を逆にしています。

さらには2Dだけではなく、今、WebGLというような3Dの表現もできます。
今後、3DのUIはWEBでも一般的になってくるでしょう。

HTML5認定試験対策講座


文系プログラミングスクール
HTML5認定試験対策講座

ホームページ制作、WEB集客、
IT・WEB担当者研修について
お気軽に無料相談へお越しください。

東京都内からも近い千葉県船橋市にて!!
お伺いすることも可能です(遠方除く)


無料相談申込み