如何使用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