Fatal编程技术网
  • javascript/
  • Javascript WebKit未捕获错误：无效\u状态\u错误：DOM异常11

Javascript WebKit未捕获错误：无效\u状态\u错误：DOM异常11

javascript

Javascript WebKit未捕获错误：无效\u状态\u错误：DOM异常11,javascript,webkit,Javascript,Webkit,我有这段代码，在Firefox中运行良好，但在Chrome中我遇到了以下错误： sprites.js:36中的“未捕获错误：无效状态\u错误：DOM异常11” 这行代码是： context.drawImage( 上下文是一个全局变量，其中包含画布的二维上下文。以下是完整代码： index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <script type="

我有这段代码，在Firefox中运行良好，但在Chrome中我遇到了以下错误：

sprites.js:36中的“未捕获错误：无效状态\u错误：DOM异常11”

这行代码是：

context.drawImage(
上下文是一个全局变量，其中包含画布的二维上下文。以下是完整代码：

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>
Prototype.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();
 }
}
在我看来，之所以会发生这种错误，是因为您使用高度或宽度为零的HTMLCanvasObject调用drawImage。从最新的画布2d上下文规范：

如果image参数是 带有 水平尺寸还是垂直尺寸 维数等于零，则 实施必须提出一个新的目标 无效的\u状态\u错误异常

希望这有帮助。

有一段时间，当我们尝试执行
document.getElemetnById（'xx'）.innerHtml='htmlcode'时，也出现了此错误此时“
htmlcode
”的格式应正确，即应使用正确的结束标记。
我正在初始化功能中设置宽度和高度。在Firefox中，这段代码是否有效。Firefox和Chrome有什么不同（@nesro不在frameArrayin prototype.js的
htmlcanvaseelements
内部是：protoPlayer.frameArray[i].width=protoPlayer.width；protoPlayer.frameArray[i].height=protoPlayer.height；@nestro-Yep，没有注意到。如果您在drawImage时记录高度和宽度，您将看到它们为0，因此设置它们不起作用（或者可能不起作用）是的..我很笨。我放弃了在SpritePrototype中设置构造函数参数的宽度和高度。很抱歉占用您的时间，但非常感谢。我已经重写了更长的代码来查找错误。如果没有进行中的测试，我再也不会写更多的代码了。这些错误太可怕了。再次感谢您！：-）

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;
 }
}



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



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