使用html或javascript從sprite表中提取單個幀

Question

我有一個由12幀組成的Sprite工作表。

在此處輸入圖片說明

我想從中提取每個單獨的框架，並希望將其顯示在如下所示的不同畫布中。 在此處輸入圖片說明

我到目前為止已經嘗試過的東西發布在下面

//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;

}

我只能得到一個圖像，但是我想使所有圖像顯示在網格中。我也想使圖像顯示在我想要的任何位置。 我還想按比例縮小大尺寸圖像以顯示在網格中，同時點擊它，我想顯示原始圖像。

注意：我不想設置幀動畫，我只想顯示在網格中。 Internet上主要有Sprite動畫的示例。

Answer 1

您具有正確的drawImage版本，可以從spritesheet剪切單個sprite，但是必須為每個sprite更改drawImage中的值。

您顯示的“面孔”示例精靈表格似乎具有相等大小的單獨精靈（75px x 75px）。

假設所有精靈大小相同，則可以更改第二和第三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; }
    canvas{border: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從sprite表中提取單個幀

問題描述

1 個解決方案

解決方案1
3 已采納 2014-06-04 16:23:28

使用html或javascript從sprite表中提取單個幀

問題描述

1 個解決方案

解決方案1 3 已采納 2014-06-04 16:23:28

解決方案1
3 已采納 2014-06-04 16:23:28