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 件のコメント:
コメントを投稿