如何使用javascript縮放/拉伸/偏斜精靈表中的精靈？

一些背景： 我正在製造一個raycaster，以及......正在製作。但我決定改變它一點。我開始着手創建射線投影儀，並決定只需顯示一個圖標並拉伸/傾斜它，而不是繞着一堆像素移動就會更容易。如何使用javascript縮放/拉伸/偏斜精靈表中的精靈？

我的問題是： 如何使用javascript縮放/拉伸/偏移精靈圖表中的精靈？

我基本上想要從一個精靈圖像中獲取一個16x16像的圖像，並對其進行定位，縮放，旋轉以及使用javascript進行傾斜。我應該怎麼做呢？

如果這有幫助，我在考慮連接該圖像的三個版本，給它一個3D塊在3D空間中移動的印象，而不實際使用3D。

來源

2011-12-09 Tgwizman

您可以使用CSS3 transform。或者使用隱藏的畫布元素，應用transformation，然後將其繪製到主畫布上。

來源

2011-12-09 19:40:38 Prusse

您可以通過在畫布上使用drawImage函數來完成此操作。以下示例將40x100精靈縮放爲雙倍80x200大小。

<html> 
    <body> 
    <canvas id="canvas" width=80 height=200> 
    <script language="JavaScript">    
     function draw() { 
      var ctx = document.getElementById('canvas').getContext('2d'); 
      var img = new Image(); 
      img.src = 'http://gamemedia.wcgame.ru/data/2011-07-17/game-sprite-sheet.jpg'; 
      img.onload = function() { 
       // (image, sx, sy, sw, sh, dx, dy, dw, dh) 
       ctx.drawImage(img,0,0,40,100,0,0,80,200); 
      } 
     } 

     draw(); 

    </script> 
    </body>   
</html>

來源

2011-12-09 19:35:15 Alex

我其實並沒有把帆布想成根本！謝謝！：D – Tgwizman

最可能的最簡單的方法是使用background-size css屬性。由於大部分現代瀏覽器（IE 9 FF4 +，Safari4的+，Chrome3 +），支持它，你可以做到以下幾點：

HTML：

<div id="mySprite"> 
</div>

CSS：

#mySprite{ 
    height: 80px; /* 64px * 1.25 */ 
    width: 80px; /* 64px * 1.25 */ 
    background-image:url(my.png); 
    background-position: -0px -560px; /* pick specific one at -448px * 1.25 */ 
    background-size:640px 640px; /* scale image to 512px * 1.25 */ 
}

的spritesheet與精靈尺寸爲64x64px，並將它們縮放到80x80px。在這裏看到活生生的例子：http://jsfiddle.net/Zgr5w/1/

正如@Prusse說：你可以使用transform: scale()也，但它也有一些缺點：瀏覽器的支持，更多的位置轉換，與其它元素對齊可能被打破：

#mySprite{ 
    height: 64px; 
    width: 64px; 
    background-image:url(my.png); 
    background-position: -0px -448px; 
    transform:scale(1.25); 
    /* additional to compensate the position shift */ 
    position:relative; 
    top:10px; 
    left:10px; 
}

看上面兩種方法的實例在這裏：http://jsfiddle.net/Zgr5w/1/

來源

2013-01-02 22:42:43 stot

很好的答案，並且您在示例1中的評論非常有用。 – jedierikb

如何使用javascript縮放/拉伸/偏斜精靈表中的精靈？

回答

相關問題