一些背景： 我正在制作光线投射器，嗯……正在制作。但我决定稍微改变一下。我开始着手创建光线投射器，并决定只显示一个图标并拉伸/倾斜它而不是仅仅围绕一堆像素移动会容易得多。
我的问题是： 如何使用 javascript 从精灵表中缩放/拉伸/倾斜精灵？
我基本上是想从一个精灵图像中获取一个 16 像素 x 16 像素的图像，然后用 javascript 定位、缩放、转动和倾斜它。我该怎么做呢？
如果这有帮助，我正在考虑连接该图像的三个版本，以给人一种 3D 块在 3D 空间中移动的印象，而无需实际使用 3D。
【问题讨论】：
标签： javascript css image-processing sprite-sheet
您可以通过在画布上使用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>
【讨论】：
您可以使用CSS3 transform 完成此操作。或者使用隐藏的画布元素，应用transformation，然后将其绘制到主画布上。
【讨论】：
很可能最简单的方法是使用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 的 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/
【讨论】：