11-改变拼板显示

4.3.3　改变拼板显示

想要改变拼板显示，可以用计数器变量乘以32（拼板宽度）。由于只有一行拼板，因此不用改变y值。

context.drawImage(tileSheet, 32*counter, 0,32,32,50,50,64,64);

提示

下节将讲解如何使用多行多列的拼图，参见4.4节。

在例4-4中，图像将被放到画布的（50，50）处，并且缩放至64 × 64。完整的代码如下。

例4-4　简单的帧式动画

　 var counter = 0;
　 var tileSheet = new Image();
　 tileSheet.addEventListener('load', eventSheetLoaded , false);
　 tileSheet.src = "ships.png";
　 function eventSheetLoaded(){
　　　startUp();
　 }
　 function drawScreen(){
　　　　 //绘制背景以显示出画布边缘
　　　　 context.fillStyle = "#aaaaaa";
　　　　 context.fillRect(0,0,500,500);
　　　　 context.drawImage(tileSheet, 32*counter, 0,32,32,50,50,64,64);
　　　　　 counter++;
　　　　　 if (counter >1){
　　　　　　　counter = 0;
　　　　　 }
　 }
function startUp(){
　 gameLoop();
}
function gameLoop() {
　　window.setTimeout(gameLoop, 100);
　　drawScreen();
}

当运行这段代码的时候，读者可以看到飞船的排气管每100s开关一次。这样，就创建了一个简单的帧式动画。