0

我正在制作一个游戏，我希望能够使用缓存的画布而不是每帧旋转图像。我想我做了一个添加对我有意义的图像的功能，但是我在每一帧都收到一个错误，告诉我画布对象不再可用。

INVALID_STATE_ERR：DOM 异常 11：尝试使用不可用或不再可用的对象。

您可能还需要知道我正在使用 object.set(); 继续将该图像添加到renderArray。这可能会影响画布对象是否仍然可用？

这是返回缓存画布的函数，（我从本网站上的帖子中获取：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 回答