从画布加载图像

Question

我正在尝试使用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);

Answer 1

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

在当前代码中，将在初始化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);

Answer 2

你错过了new的位置：

this.sprite = Image();

尝试：

this.sprite = new Image();

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