WebKit error no detectada: INVALID_STATE_ERR: DOM Excepción 11

tengo este código y en Firefox está funcionando bien, pero en Chrome I'am conseguir este error:WebKit error no detectada: INVALID_STATE_ERR: DOM Excepción 11

"Uncaught Error: INVALID_STATE_ERR: DOM Exception 11" at sprites.js:36

en esa línea es el código:

context.drawImage(

El contexto es una variable global en la que contiene 2d contexto de lienzo. Aquí está el código completo:

index.html

<!doctype html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <script type="text/javascript" src="sprites.js"></script> 
    <script type="text/javascript" src="game.js"></script> 
    <script type="text/javascript" src="prototypes.js"></script> 
    <script type="text/javascript" src="initialize.js"></script> 
</head> 
<body onload="initialize()"> 
</body> 
</html>

sprites.js

function SpritePrototype(frames, width, height, type) 
{ 
this.frames = frames; 
this.type = type; 

if (this.frames > 0) { 
    this.frameArray = new Array(this.frames); 
    for (var i = 0; i < this.frames; i++) { 
    this.frameArray[i] = document.createElement("canvas"); 
    } 
} 
} 

function Sprite() 
{ 
this.id = 0; 
this.prototype = 0; 

this.next = 0; 
this.prev = 0; 

this.x = 0; 
this.y = 0; 

this.startFrame = 0; 
this.currentFrame = 0; 
} 

Sprite.prototype.draw = function() 
{ 
if (this.prototype == 0) { 
    return; 
} 
if (context.drawImage) { 
    if (this.prototype.frames > 0) { 
    context.drawImage(
    this.prototype.frameArray[this.currentFrame], 
    Math.round(this.x), 
    Math.round(this.y) 
    ); 
    } 
} 
}

game.js

function Game() 
{ 
this.frameLength = 1000/30; 
this.startTime = 0; 

this.sprites = 0; 
} 

Game.prototype.resetTime = function() 
{ 
var d = new Date(); 
this.startTime = d.getTime(); 
delete d; 
} 

Game.prototype.addSprite = function(prototype) 
{ 
currentId++; 

if (this.sprites == 0) { // if creating the first sprite 
    this.sprites = new Sprite(); 
    this.sprites.id = currentId; 
    this.sprites.prototype = prototype; 
} else { 
    var tempSprite = this.sprites; // temporarily store the first sprite 
    while (tempSprite.next != 0) { // while not the last sprite 
    tempSprite = tempSprite.next; // shift to next one 
    } 

    tempSprite.next = new Sprite(); // next sprite to the last sprite 
    tempSprite.next.id = currentId; 
    tempSprite.next.prototype = prototype; 

    tempSprite.next.next = 0; // the last sprite, or the last one in the space 
    tempSprite.next.prev = tempSprite; 
} 
} 

Game.prototype.loop = function() 
{ 
var tempSprite; 
var currentTime; 
var globalFrame; 
var oldFrame; 

var d = new Date(); 
currentTime = d.getTime(); 
delete d; 
globalFrame = Math.floor((currentTime - this.startTime)/this.frameLength); 

canvas.width = canvas.width; 

tempSprite = this.sprites; 
while (tempSprite != 0) { 
    if (tempSprite.frames > 0) { 
    oldFrame = tempSprite.currentFrame; 
    tempSprite.currentFrame = globalFrame; 
    } 

    tempSprite.draw(); 

    tempSprite = tempSprite.next; 
} 
}

prototypes.js

var protoPlayer; 

function createPrototypes() 
{ 
var tempCtx; 
var i; 

protoPlayer = new SpritePrototype(5, 20, 30, "player"); 
for (i = 0; i < protoPlayer.frames; i++) { 
    protoPlayer.frameArray[i].width = protoPlayer.width; 
    protoPlayer.frameArray[i].height = protoPlayer.height; 
    tempCtx = protoPlayer.frameArray[i].getContext("2d"); 
    tempCtx.strokeStyle = "rgb("+ i * 50 +", 0, 0)"; 
    tempCtx.beginPath(); 
    tempCtx.moveTo(0, 0); 
    tempCtx.lineTo(20, 30); 
    tempCtx.stroke(); 
} 
}

initialize.js

var game; 

var canvas; 
var context; 

var currentId; 

function initialize() 
{ 
canvas = document.createElement("canvas"); 
canvas.width = 640; 
canvas.height = 480; 
canvas.setAttribute("style", "background:#060606;"); 
document.body.appendChild(canvas); 
context = canvas.getContext("2d"); 

createPrototypes(); 

currentId = 0; 

game = new Game(); 

game.addSprite(protoPlayer); 

game.loop(); 
}

Fuente

2010-12-29 Tomáš Nesrovnal

Me parece que este error ocurre porque se está llamando drawImage con un HTMLCanvasObject que su altura o anchura es igual a cero. Desde la última 2d lienzo contexto de especificaciones:

If the image argument is an HTMLCanvasElement object with either a horizontal dimension or a vertical dimension equal to zero, then the implementation must raise an INVALID_STATE_ERR exception.

http://dev.w3.org/html5/2dcontext/#images

Espero que esto ayude.

Fuente

2010-12-29 14:49:29 Hemlock

Estoy estableciendo el ancho y el alto en la función de inicialización. Y en Firefox está funcionando este código. ¿Qué es diferente entre Firefox y Chrome? :( –

@nesro No en el 'HTMLCanvasElements' interior de frameArray – Hemlock

en prototype.js es: \t \t protoPlayer.frameArray [i] = .width protoPlayer.width; \t \t protoPlayer.frameArray [i] = .height protoPlayer. altura; –

Alguna vez este error también ocurrió cuando tratamos de hacer document.getElemetnById('xx').innerHtml='htmlcode'; en este tiempo 'htmlcode' debe ser el medio con el formato adecuado debe utilizar etiquetas de cierre adecuadas.

Fuente

2012-06-28 19:12:17 Dhiraj

WebKit error no detectada: INVALID_STATE_ERR: DOM Excepción 11

Respuesta

Cuestiones relacionadas