[目次]
ビットマップ画像をタイルシート | Webプログラミング!(2021年度)
ビットマップ画像
サンプル1
サンプル1index.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);
}
}参考
- 掌田津耶乃, HTML5 Webアプリケーションプログラミング入門
(第5章)
- 奥村晴彦先生 グラフを描く(canvas編)|JavaScript
