使用 html 或 javascript 从精灵表中提取单个帧
Posted
技术标签:
【中文标题】使用 html 或 javascript 从精灵表中提取单个帧【英文标题】：Extract individual frame from a sprite sheet using html or javascript 【发布时间】：2014-07-25 01:12:16 【问题描述】：我有一个由 12 帧组成的精灵表。
我想从中提取每个单独的帧，并希望在不同的画布中显示它，如下所示。
到目前为止我尝试过的都发布在下面
//html code for define the canvas area .
<body onload="image_render();">
<div id="image_area"> <canvas id="image"></canvas></div>
<script src="sprite_demo.js"></script>
</body>
// javascript to slice the image and assign to the canvas
var canvasImage = new Image();
canvasImage.src = "image/sprite_xxdpi.jpg";
var can= document.getElementById("image");
can.width = 500;
can.height = 300;
function image_render()
coin.render();
var coin = sprite(
context: can.getContext("2d"),
width: 500,
height: 300,
image: coinImage
);
function sprite (options)
var that = ;
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;
that.render = function ()
// Draw the animation
that.context.drawImage(
that.image,
0, //X-axis starting position from where slicing begins
0, //y-axis starting position from where slicing begins
that.width, //width of slicing image
that.height,//height of slicing image
0, //X-axis starting position where image will be drawn
0, //y-axis starting position where image will be drawn
150, // width of the resulting image
150); //height of the resulting image
;
return that;
我只能得到一个图像，但我想让所有图像显示在一个网格中。而且我想让图像显示在我想要的任何地方。 我还想缩小大尺寸图像以显示在网格中，并且在点击它时我想显示原始图像。
注意：我不想为我的帧设置动画，我只想在网格中显示。互联网上大多是精灵动画的例子。
【问题讨论】：
【参考方案1】：您有正确版本的 drawImage 可以从 spritesheet 中剪切单个 sprite，但您必须更改每个 sprite 的 drawImage 中的值。
您展示的“面孔”示例 spritesheet 似乎具有相同大小的单个 sprite（75 像素 x 75 像素）。
假设您所有的精灵大小相同，您将更改第二个和第三个 drawImage 参数，这些参数告诉画布左上角的 x/y 坐标以开始在精灵表上进行剪辑。
这是示例代码和演示：http://jsfiddle.net/m1erickson/tVD2K/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body background-color: ivory;
canvasborder:1px solid red;
</style>
<script>
$(function()
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var spriteWidth=75;
var spriteHeight=75;
var spriteCols=4;
var spriteRows=3;
var y=20-sprightHeight;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/spritesheet1.jpg";
function start()
var canvasY=0;
for(var col=0;col<spriteCols;col++)
for(var row=0;row<spriteRows;row++)
var sourceX=col*spriteWidth;
var sourceY=row*spriteHeight;
// testing: calc a random position to draw this sprite
// on the canvas
var canvasX=Math.random()*150+20;
canvasY+=spriteHeight+5;
// drawImage with changing source and canvas x/y positions
ctx.drawImage(img,
sourceX,sourceY,spriteWidth,spriteHeight,
canvasX,canvasY,spriteWidth,spriteHeight
);
); // end $(function());
</script>
</head>
<body>
<h4>Draw individual sprites from a spritesheet</h4>
<canvas id="canvas" width=300 height=1000></canvas>
</body>
</html>
【讨论】：
以上是关于使用 html 或 javascript 从精灵表中提取单个帧的主要内容，如果未能解决你的问题，请参考以下文章
如何修复我的 html/javascript 代码来为精灵表设置动画？