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

我想画图像精灵使用画布

代码不起作用。如何改进我的代码

我有一些错误

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 );
    }
};

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var博弈={
绘制图像：函数（img、sourceX、sourceY、sourceW、sourceH、destX、destY、destW、destH）{
var img=new Image（）；//创建新的img元素
img.src='images/background.png'；//设置源路径
img.onload=函数（）{
画布宽度=1000；
高度=500；
ctx.drawImage（img、sourceX、sourceY、sourceW、sourceH、destX、destY、destW、destH）；
};
}
变量背景={
图像顶部：{x:5，y:5，w:1280，h:480，dx:0，dy:0，dw:500，dh:500}，
图像体：{x:5，y:495，w:1280，h:480，dx:0，dy:150，dw:500，dh:350}，
图片底部：{x:5，y:985，w:1280，h:480，dx:0，dy:300，dw:500，dh:200}
};
对于（var n=0；n

要使此精灵动画正常工作，必须使用此代码解决许多问题。我不会指出您的代码中存在的任何问题，但我强烈建议您在尝试编写此类代码之前先阅读一点

另一个简单的（对新手来说也是最好的）解决方案是使用画布框架，这样你可以做一些类似的事情来制作精灵的动画：

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");

---

要创建精灵动画，了解其工作原理很重要

您需要使用像素精度制作精灵表（1个像素可能会弄乱动画）

就像，角色总是在相同大小的区域中，在制作精灵时要简单

使用此选项，您可以为您喜欢的每个精灵创建一个对象：

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
                 );
}

Sprite.prototype.render=function（）{
if（this.position.x）什么错误，哪些行？什么是
nameImage
？
Uncaught SyntaxError:line
var BACKGROUND={
我希望精灵图像顶部、图像主体、图像底部的名称为
nameImage
man，你有标点问题，而且我认为你不知道
var x=function（）
和
function x（）之间的区别
，如果您是Javascript新手，有更好的方法来实现这一点。您知道任何画布动画框架吗？