0

私はゲームを作っています。その中で、フレームごとに画像を回転させる代わりに、キャッシュされたキャンバスを使用できるようにしたいと思います。自分にとって意味のある画像を追加する機能を作ったと思いますが、フレームごとにエラーが発生し、キャンバスオブジェクトが使用できなくなったことがわかります。

INVALID_STATE_ERR：DOM例外11：使用できない、または使用できなくなったオブジェクトを使用しようとしました。

また、私がobject.set（）;を使用していることを知る必要があるかもしれません。先に進み、その画像をrenderArrayに追加します。これは、キャンバスオブジェクトがまだ使用可能かどうかに影響している可能性がありますか？

キャッシュされたキャンバスを返す関数は次のとおりです（このWebサイトの投稿から取得しました：D）

rotateAndCache = function(image, angle){
    var offscreenCanvas = document.createElement('canvas');
    var offscreenCtx = offscreenCanvas.getContext('2d');
    var size = Math.max(image.width, image.height);
    offscreenCanvas.width = size;
    offscreenCanvas.height = size;
    offscreenCtx.translate(size/2, size/2);
    offscreenCtx.rotate(angle + Math.PI/2);
    offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2));
    return offscreenCanvas;
}

そして、ここにいくつかのよりマークアップされたコードがあります：

var game = {
    render:function(){
    //gets called every frame
        context.clearRect(0, 0, canvas.width, canvas.height);
        for(i = 0; i < game.renderArray.length; i++){
            switch(game.renderArray[i].type){
                case "image":
                    context.save();
                    context.translate(game.renderArray[i].x, game.renderArray[i].y);
                    context.rotate(Math.PI*game.renderArray[i].rotation/180);
                    context.translate(-game.renderArray[i].x, -game.renderArray[i].y);
                    context.drawImage(game.renderArray[i].image, game.renderArray[i].x, game.renderArray[i].y);
                    context.restore();
                    break;
            }
            if(game.renderArray[i].remove == true){
                game.renderArray.splice(i,1);
                if(i > 1){
                    i--;
                }else{
                    break;
                }
            }
        }
    },
    size:function(width, height){
        canvas.height = height;
        canvas.width = width;
        return height + "," + width;
    },
    renderArray:new Array(),
    //initialize the renderArray
    image:function(src, angle){
        if(angle != undefined){
                    //if the argument 'angle' was given
            this.tmp = new Image();
            this.tmp.src = src;
                    //sets 'this.image' (peach.image) to the canvas. It then should get rendered in the next frame, but apparently it doesn't work...
            this.image = rotateAndCache(this.tmp, angle);
        }else{
            this.image = new Image();
            this.image.src = src;
        }
        this.x = 0;
        this.y = 0;
        this.rotation = 0;
        this.destroy = function(){
            this.remove = true;
            return "destroyed";
        };
        this.remove = false;
        this.type = "image";
        this.set = function(){
            game.renderArray.push(this);    
        }
    }
};

var canvas, context, peach;

$(document).ready(function(){
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    //make the variable peach a new game.image with src of meme.jpg and an angle of 20.
    peach = new game.image('meme.jpg', 20);
    peach.set();
    game.size(700,500);
    animLoop();
});

必要に応じて、私のサイトでホストされているこのプロジェクトは次のとおりです：http: //keirp.com/zap

4

1 に答える 1

1

あなたのページにはエラーはありません。少なくとも、私が見ることができるエラーはありません。

読み込みが完了していない画像が問題である可能性は十分にあります。たとえば、読み込みが完了していない画像からキャンバス パターンを作成しようとすると、このエラーが発生します。pxloaderや独自の画像読み込み関数などを使用して、描画を開始する前にすべての画像が完成していることを確認してください。

とにかく、コードが実際にエラーを出していないため (もう)、何が起こっているのか、何が起こっているのかを把握することはほぼ不可能です。

于 2012-04-05T18:24:31.530 に答える