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

Question

一些背景：我正在做一個raycaster，好吧......正在制作。 但我決定改變一下。 我開始創建光線施法者，並決定只顯示一個圖標並拉伸/傾斜它而不是僅僅移動一堆像素就容易多了。

我的問題是：如何使用javascript從精靈表中縮放/拉伸/傾斜精靈？

我基本上想要從精靈圖像中獲取16像素×16像素的圖像，並將其定位，縮放，轉動，並使用javascript進行傾斜。 我應該怎么做呢？

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

Answer 1

最可能最簡單的方法是使用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/

Answer 2

您可以通過在畫布上使用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>

Answer 3

你可以用CSS3轉換來做到這一點。 或者使用隱藏的畫布元素，應用轉換，然后將其繪制到主畫布。

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

問題描述

3 個解決方案

解決方案1
7 2013-01-02 22:42:43

解決方案2
2 2011-12-09 19:35:15

解決方案3
2 已采納 2011-12-09 19:40:38

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

問題描述

3 個解決方案

解決方案1 7 2013-01-02 22:42:43

解決方案2 2 2011-12-09 19:35:15

解決方案3 2 已采納 2011-12-09 19:40:38

解決方案1
7 2013-01-02 22:42:43

解決方案2
2 2011-12-09 19:35:15

解決方案3
2 已采納 2011-12-09 19:40:38