Javascript 从画布加载图像

我试图用HTML5制作一个游戏，但在加载图像资源时遇到了问题。我的问题是代码的onload事件没有触发，因此布尔值没有改变

var c = document.getElementById("gamearea");
var gs = c.getContext("2d");
var one_x = 0;
//Sprite Loading//
function sprite(src,x, y, width, height, frames, levels) {
    this.sprite = Image();
    this.sprite.src = src;
    this.x = x;
    this.y = y;
    this.w = width;
    this.h = height;
    this.f = frames;
    this.l = levels;
    this.cf = 0;
    this.cl = 0;
    this.loaded = false;
    this.src = src;
}
sprite.prototype.draw = function () {
    if (this.loaded) {
        document.getElementById("ass").innerHTML = "Ass";
        gs.drawImage(this.src, this.x, this.y);
    }
}

dog = new sprite("/images/sDog.png", 10, 10, 10, 10, 1, 1);
dog.sprite.onload = function () {
    alex.loaded = true;
}
setInterval(alex.draw, 30);

你错过了这里的新消息：

尝试：

this.sprite = new Image();

---

还要确保图像文件确实存在于给定位置。

我建议将onload事件放在为您的狗精灵图像对象设置的事件之前。我看到您在构造函数中设置了所有内容，但我建议您不要这样做

在当前代码中，在初始化onload事件的行之前加载对象

我在加载图像时经常看到这种情况，我会这样做

function sprite(src,x, y, width, height, frames, levels) {
  var self = this;
  self.sprite = new Image();
  self.init = function(){
    self.sprite.src = src;
    self.x = x;
    self.y = y;
    self.w = width;
    self.h = height;
    self.f = frames;
    self.l = levels;
    self.cf = 0;
    self.cl = 0;
    self.loaded = false;
    self.src = src;
  }
}

dog = new sprite();
dog.sprite.onload = function () {
  alex.loaded = true;
}
dog.init("/images/sDog.png", 10, 10, 10, 10, 1, 1);
setInterval(alex.draw, 30);

或者，为了得到一点幻想

function sprite(src,x, y, width, height, frames, levels, onLoad) {
  var self = this;
  self.sprite = new Image();
  self.sprite.onload = function(){
     onLoad();
  }
  self.sprite.src = src;
  self.x = x;
  self.y = y;
  self.w = width;
  self.h = height;
  self.f = frames;
  self.l = levels;
  self.cf = 0;
  self.cl = 0;
  self.loaded = false;
  self.src = src;
}

dog = new Sprite("/images/sDog.png", 10, 10, 10, 10, 1, 1, function(){
   alex.loaded = true;
});
setInterval(alex.draw, 30);

看了你的小提琴之后

var c = document.getElementById("gamearea");
var gs = c.getContext("2d");
var one_x = 0;
//Sprite Loading//
function sprite(src, x, y, width, height, frames, levels, loaded) {
var self = this;
self.sprite = new Image();
self.sprite.onload = function(){
    self.loaded = true;
}   
    self.sprite.src = src;

    self.x = x;
    self.y = y;
    self.w = width;
    self.h = height;
    self.f = frames;
    self.l = levels;
    self.cf = 0;
    self.cl = 0;
    self.loaded = false;
    self.src = src;

self.update = function () {
    one_x += 1;
    gs.fillStyle = "white";
    gs.fillRect(0, 0, 1000, 10000);
    gs.fillStyle = "black";
    gs.fillRect(one_x, 20, 10, 10);
}
self.draw = function (){
    if (self.loaded) {
        document.getElementById("ass").innerHTML = "Ass";
        gs.drawImage(self.sprite, self.x, self.y);
    }
}

}
dog = new sprite("http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png", 10,     10, 10, 10, 1, 1);
setInterval(dog.draw, 30);

---

onload事件发生了吗？不，我似乎无法从中获得警报或任何反馈。这起作用：您忘记将一些事件更改为self。我看了看您的小提琴，发现了一些问题，我尝试在跨越多个函数时不使用this对象，这很容易不是您所期望的。2我将加载的setter移到构造函数中，因为它唯一真正的目的是设置一个存在于对象中的标志。理想情况下，当有人回答你的问题时，你应该将答案标记为正确，并给出一个放弃的答案谁是亚历克斯？我看亚历克斯哪儿都没有。

var c = document.getElementById("gamearea");
var gs = c.getContext("2d");
var one_x = 0;
//Sprite Loading//
function sprite(src, x, y, width, height, frames, levels, loaded) {
var self = this;
self.sprite = new Image();
self.sprite.onload = function(){
    self.loaded = true;
}   
    self.sprite.src = src;

    self.x = x;
    self.y = y;
    self.w = width;
    self.h = height;
    self.f = frames;
    self.l = levels;
    self.cf = 0;
    self.cl = 0;
    self.loaded = false;
    self.src = src;

self.update = function () {
    one_x += 1;
    gs.fillStyle = "white";
    gs.fillRect(0, 0, 1000, 10000);
    gs.fillStyle = "black";
    gs.fillRect(one_x, 20, 10, 10);
}
self.draw = function (){
    if (self.loaded) {
        document.getElementById("ass").innerHTML = "Ass";
        gs.drawImage(self.sprite, self.x, self.y);
    }
}

}
dog = new sprite("http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png", 10,     10, 10, 10, 1, 1);
setInterval(dog.draw, 30);