ビットマップ画像をタイルシート | Webプログラミング!(0000年度)

Time-stamp: "2013-02-04 Mon 22:05 JST hig"

ビットマップ画像

サンプル1

サンプル1

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Canvasのテスト</title>
<script type="text/javascript" src="paintcanvas.js"></script>
<script type="text/javascript">
  window.onload = function (){
     var c=document.querySelector('#canvas-id1');
     paintCanvas(c); // defined in external JavaScript file
  }
</script>


</head>
<body>
  <h1>Canvasのテスト</h1>
  <canvas id="canvas-id1" width="400" height="320">対応していないときに表示される文字列</canvas>
</body>
</html>

paintcanvas.js


function paintCanvas(c){
    var ct=c.getContext('2d'); 


    var cat=new Image();
    cat.src="GUM15_SY02055.jpg"; // 同じディレクトリに置かれた画像ファイル名
    cat.onload = paint;
//    cat.addEventListener('load',paint(),false); // これでもいい気がしたんだけどだめ?

    setInterval(update,500);//1000ミリ秒ごとにrepeatPaintCanvasを呼

    // タイル内の各色の足の原点
    var spos=[ [90,30],[90,100],[90,170],[90,240] ]; 
    // タイル内の足のサイズ

    var swidth=60; 
    var sheight=50;
    var dwidth;
    var dheight;

    // 初期位置, 初速
    var x=60;
    var y=50;
    var dx=4;
    var dy=2;

    // 0-4のうち何枚目の画像を表示するか
    var im=0;

    function update(){
	x+=dx;
	y+=dy;
	im=(im+1)% spos.length;
	paint();
    }


    function paint(){
	ct.fillStyle="rgba(255,255,255,1)";
	ct.fillRect(0,0,c.width,c.height);

	var dwidth=swidth*(2+im%2)/3; 
	var dheight=sheight*(2+im%2)/3;
	ct.drawImage(cat,spos[im][0],spos[im][1],swidth,sheight,x-dwidth/2,y-dheight/2,dwidth,dheight);
    }

}

画像ファイルGUM15_SY02055.jpg

参考

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net