2014年7月29日火曜日

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

0 件のコメント:

コメントを投稿