1

キャンバス ゲームで使用する単純な Sprite クラスを作成しようとしていますが、クラスの新しいインスタンスを作成するときに指定した画像は、onload または onerror を呼び出しません。何が起こっているのですか? また、画像を読み込んで描画するにはどうすればよいですか?

スクリプトは次のとおりです。

var cvs = document.getElementById("c");
var ctx = cvs.getContext("2d");
var imagesToLoad = 1 ;
var imagesLoaded = 0;
var gameState = 0;
//START OF IMAGE STUFF//
function imageOnload() {
    imagesLoaded+=1;
    console.log("Images: loaded "+imagesLoaded+" overall.");
}
function loadLoop() {
    if (imagesLoaded == imagesToLoad) {
        gameState = 1;
    }
}
function loop1() {
    ctx.drawImage(circle.image);
}
function gameLoop() {
    if(gameState==0){
        loadLoop();
    }
    if(gameState==1){
        loop1();
    }
}

function Sprite(positionsArray){
    this.x = positionsArray[0];
    this.y = positionsArray[1];
    this.dx = positionsArray[2];
    this.dy = positionsArray[3];
    this.angle = positionsArray[4];
    this.rotating = positionsArray[5];


};
circle = new Sprite(new Array(0, 0, 0, 0, 0, 0));
circle.image = new Image().onload="imageOnload()".src="circle.png".onerror="console.log(\"Nope.\")";
console.log("circle?");
setInterval(function(){gameLoop()}, 10);
//END OF IMAGE STUFF//
4

1 に答える 1

0

訂正:

  • image.onload 関数定義に引用符はありません
  • image.onload 関数定義に括弧がありません
  • image.onerror には関数定義または無名関数が必要です
  • image.src の前に image.onerror を置く

コード例を次に示します。

circle.image=new Image();
circle.image.onload=imageOnLoad;
circle.image.onerror=function(){console.log("Image failed to load")};
circle.image.src="koolaidman.png";

function imageOnLoad(){
    ctx.drawImage(circle.image,0,0);  // or do other stuff
}
于 2013-09-20T05:21:09.980 に答える