JavaScriptとcanvas

HTML5にはcanvasというコンポーネントが導入されています。
textareaがテキストターミナルなら
canvasはグラフィック仮想スクリーンですね。
ネイティブのWindowsでいうならPictureBoxに該当します。
しかも最近はGPUアクセラレーションして高速描画が実現し、
ゲームだってちゃんと遊べるぐらいになっています。

canvasの使い方はそう難しくなく、

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var c1;
window.onload=function(){
	c1=document.getElementById("c1").getContext('2d');
};
</script>
</head>
<body>
<canvas id="c1" width="320" height="240" style="background-color:white;" />
</body>

のようなHTMLファイルを作れば動きます。

canvasに白い四角を書きたければ以下を実行します。

	c1.beginPath();
	c1.fillStyle="#ffffff";
	c1.fillRect(100,100,20,20);

canvasに表示されている画像は

	var img=c1.getImageData(0,0,100,100);

のようにバッファにコピーでき、

	c1.putImageData(img,0,100);

で、それをcanvasにまたコピーできるので、
うまく使えば背景上のキャラクターをスプライトのように移動できますし、
座標をうまくすればスクロールも可能です。

広告