6

一些背景： 我正在制作光线投射器，嗯……正在制作。但我决定稍微改变一下。我开始着手创建光线投射器，并决定只显示一个图标并拉伸/倾斜它而不是仅仅围绕一堆像素移动会容易得多。

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

我基本上想从一个精灵图像中获取一个 16 像素 x 16 像素的图像，然后用 javascript 定位、缩放、转动和倾斜它。我该怎么做呢？

如果这有帮助，我正在考虑连接该图像的三个版本，以给人一种 3D 块在 3D 空间中移动的印象，而无需实际使用 3D。

4

3 回答 3

7

很可能最简单的方法是使用background-sizecss 属性。由于大多数现代浏览器（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 的 sprite，并将它们缩放到 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-02T22:42:43.233 回答
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>
于 2011-12-09T19:35:15.007 回答
2

您可以使用CSS3 transform来实现。或者使用隐藏的画布元素，应用转换，然后将其绘制到主画布上。

于 2011-12-09T19:40:38.833 回答