如何使用画布绘制图像精灵？

问题描述：

的代码无法正常工作。如何改进我的代码。

我有一些错误。

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var Game = { 

draw_image: function(img, sourceX, sourceY, sourceW, sourceH, destX, destY, destW, destH){ 

var img = new Image(); // Create new img element 
img.src = 'images/background.png'; // Set source path 
img.onload = function(){ 
      canvas.width = 1000; 
      canvas.height = 500; 
      ctx.drawImage(img, sourceX, sourceY, sourceW, sourceH, destX, destY, destW, destH); 
}; 
} 

var BACKGROUND = { 
    image_top: { x: 5, y: 5, w: 1280, h: 480 , dx:0 ,dy:0 ,dw:500 ,dh:500 }, 
    image_body: { x: 5, y: 495, w: 1280, h: 480 , dx:0 ,dy:150 ,dw:500 ,dh:350}, 
    image_bottom: { x: 5, y: 985, w: 1280, h: 480 , dx:0 ,dy:300 ,dw:500 ,dh:200 } 
}; 

for(var n = 0 ; n < BACKGROUND.length ; n++) { 
    draw_image(nameImage, BACKGROUND[n].x,BACKGROUND[n].y, BACKGROUND[n].w, BACKGROUND[n].h, BACKGROUND[n].dx, BACKGROUND[n].dy, BACKGROUND[n].dw, BACKGROUND[n].dh); 
    } 
};

什么错误，这行？什么是'nameImage'？ – 2013-02-14 05:37:54

'未捕获的SyntaxError：意外令牌变种'管线'VAR BACKGROUND = {' – user1954217 2013-02-14 05:40:48

欲子画面image_top，image_body，图像底部的名称将是'nameImage' – user1954217 2013-02-14 05:42:44

答

你必须用这段代码来解决这个精灵动画的许多问题。我不会去指出你的代码的任何问题，但我强烈建议在尝试编写这种代码之前先阅读一下functions and variable scope。

另一个简单的（和最适合新手）解决方案，可以为使用画布框架EaselJS，有了这个，你可以做这样的事情，以动画的精灵：

var data = { 
    images: ["images/background.png"], 
    frames: {width:50, height:50}, 
    animations: {run:[0,4], jump:[5,8,"run"]} 
}; 
var animation = new createjs.BitmapAnimation(data); 
animation.gotoAndPlay("run");

答

要创建一个精灵动画是非常重要的知道它是如何工作的。

你需要你的spritesheet使与像素精度（1个像素可弄乱你的动画）。

像here，性格总是在相同大小的面积，使其简单，当你让你的精灵。

有了这个，你可以使对象为每个精灵你有这样的：

function Sprite(_position, _numberFrame, _framesize, _image, _duration){ 
    this.position = _position;  //Array like { x : 0, y : 0 } 
    this.rendersize = _rendersize; //Array like { width : 50, height : 80 } 
    this.framesize = _framesize; //Array like { width : 50, height : 80 } 
    this.image = _image;   //Image object 
    this.chrono = new Chrono(_duration); //Explanation below 
}

更多的动画精度，你可以添加一个时辰谁将会管理您的动画的时间：

function Chrono(_duration){ 
    this.currentTime = 0; 
    this.lastTime = 0; 
    this.timeElapse = 0; 
    this.duration = _duration; 
} 

Chrono.prototype.countTime = function(){ 
    this.currentTime = Date.now(); 

    if(this.lastTime != 0) 
     this.timeElapse += this.currentTime - this.lastTime; 

     this.lastTime = Date.now(); 

    if(this.timeElpase >= this.duration && this.lastTime != 0){ 
     this.timeElapse = 0; 
     return TRUE; 
    } else { 
     return FALSE; 
    } 
}

然后，动画你的精灵的功能可能会像：

Sprite.prototype.render = function(){ 
    if(this.position.x <= this.image.width && this.chrono.countTime()){ 
     this.position.x += this.framesize.x; 
    } else { 
     this.position.x = 0; 
    } 
    ctx.drawImage(this.image, 
        this.position.x, this.position.y, 
        this.framesize.width, this.framesize.height, 
        this.rendersize.width, this.rendersize.height 
       ); 
}

我希望我清楚d有用，

干杯

PS：评论对问题或优化思路

如何使用画布绘制图像精灵？

相关推荐