如何使用javascript从精灵表中缩放/拉伸/倾斜精灵?
Posted
技术标签:
【中文标题】如何使用javascript从精灵表中缩放/拉伸/倾斜精灵?【英文标题】:How can I scale/stretch/skew a sprite from a sprite sheet with javascript? 【发布时间】:2012-01-17 00:34:59 【问题描述】:一些背景: 我正在制作光线投射器,嗯……正在制作。但我决定稍微改变一下。我开始着手创建光线投射器,并决定只显示一个图标并拉伸/倾斜它而不是仅仅围绕一堆像素移动会容易得多。
我的问题是: 如何使用 javascript 从精灵表中缩放/拉伸/倾斜精灵?
我基本上是想从一个精灵图像中获取一个 16 像素 x 16 像素的图像,然后用 javascript 定位、缩放、转动和倾斜它。我该怎么做呢?
如果这有帮助,我正在考虑连接该图像的三个版本,以给人一种 3D 块在 3D 空间中移动的印象,而无需实际使用 3D。
【问题讨论】:
【参考方案1】:您可以通过在画布上使用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>
【讨论】:
其实我根本没有想到画布!谢谢! :D【参考方案2】:您可以使用CSS3 transform 完成此操作。或者使用隐藏的画布元素,应用transformation,然后将其绘制到主画布上。
【讨论】:
【参考方案3】:很可能最简单的方法是使用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/
【讨论】:
很好的答案,示例一中的 cmets 非常有帮助。以上是关于如何使用javascript从精灵表中缩放/拉伸/倾斜精灵?的主要内容,如果未能解决你的问题,请参考以下文章