Pages

0

練習 - html5 利用陣列排出圖片


點選上面這張圖片就可以看到效果~

最近在練習html5中練習到一個不錯的技巧，
就是利用二維矩陣來產生圖片，
而製作出來的圖片又可以利用html5的方式輸出成jpg或png，
或是進一步製作動畫或是遊戲，
算是一個非常實用的技法~
原理其實就是把一張具有固定長寬格子畫分的圖片，
轉換成二維矩陣的形式來表現，
再利用html5當中的drawImage，
根據矩陣讀取各個格子中的圖片區塊來組合~

<script> 
 var Canvas = document.getElementById("canvas");
 var context = Canvas.getContext("2d"); 

 var theMap = [
  [8,8,8,8,8,19,8,8,8,8],
  [19,19,19,19,19,19,19,19,19,19],
  [1,19,3,19,3,19,3,19,19,1],
  [19,19,19,19,19,19,19,19,19,19],
  [26,26,26,26,26,19,26,26,26,26]
 ];

 var spaceShip = new Image();
 spaceShip.src = "img/tankbrigade2.png";
 spaceShip.addEventListener("load",eventShipLoaded,false);

 function eventShipLoaded(){
  drawscreen();
 } 

 function drawscreen(){
  for(var row=0;row<5;row++){
   for(var col=0;col<10;col++){
    var a = theMap[row][col]-1;
    var sx = Math.floor(a%8)*33;
    var sy = Math.floor(a/8)*33;
    context.drawImage(spaceShip,sx,sy,34,34,col*33,row*33,34,34);
   }
  }
 }
</script>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言