Question

我有这个代码并且在Firefox中运行良好，但在Chrome中我收到此错误：

sprites.js上的“未捕获错误：INVALID_STATE_ERR：DOM例外11”：36

该行的

是这段代码：

context.drawImage(

Context是一个全局变量，其中包含canvas的2d上下文。这是完整的代码：

的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(); 
}

Answer 1

我觉得发生错误是因为你用高度或宽度为零的HTMLCanvasObject调用drawImage。从最新的canvas 2d上下文规范：

如果图像参数是 HTMLCanvasElement对象带有一个水平尺寸或垂直尺寸维度等于零，然后是实施必须提高 INVALID_STATE_ERR例外。

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

希望这有帮助。

Answer 2

有些时候，当我们在document.getElemetnById('xx').innerHtml='htmlcode';'尝试执行htmlcode时，也会出现此错误，应该使用正确的格式，并使用正确的结束标记。

WebKit未捕获错误：INVALID_STATE_ERR：DOM异常11

2 个答案: