Question

一些背景知识 我正在做一个raycaster，好吧......正在制作。但我决定改变一下。我开始创建光线施法者，并决定只显示一个图标并拉伸/倾斜它而不是仅仅移动一堆像素就更容易了。

我的问题是： 如何使用javascript从精灵表中缩放/拉伸/倾斜精灵？

我基本上想要从精灵图像中获取16px x 16px图像，然后定位，缩放，转动它，并使用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 transform执行此操作。或者使用隐藏的画布元素，应用transformation，然后将其绘制到主画布。

如何使用javascript从精灵表中缩放/拉伸/倾斜精灵？

3 个答案: