草庐IT

javascript - WebKit 未捕获错误 : INVALID_STATE_ERR: DOM Exception 11

coder 2024-07-22 原文

我有这段代码,在 Firefox 中运行良好,但在 Chrome 中我遇到了这个错误:

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

在那一行是这段代码:

context.drawImage(

Context 是一个全局变量,其中包含 Canvas 的二维上下文。这是完整的代码:

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>

Sprite .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)
   );
  }
 }
}

游戏.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;
 }
}

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

初始化.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(); 
}

最佳答案

在我看来,发生该错误是因为您使用高度或宽度为零的 HTMLCanvasObject 调用 drawImage。来自最新的 canvas 2d 上下文规范:

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

希望这对您有所帮助。

关于javascript - WebKit 未捕获错误 : INVALID_STATE_ERR: DOM Exception 11,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4554551/

有关javascript - WebKit 未捕获错误 : INVALID_STATE_ERR: DOM Exception 11的更多相关文章

  1. ruby-on-rails - Capybara-webkit 引发 Capybara::Driver::Webkit::WebkitInvalidResponseError - 2

    我在rspec中收到来自webkit驱动程序的以下消息:Capybara::Driver::Webkit::WebkitInvalidResponseError:UnabletoloadURL:http://127.0.0.1:44923/posts几天前它成功了。问题出在save_page方法上。有什么问题吗? 最佳答案 当我的页面出现错误时,我收到过类似的错误消息。您应该通过在测试模式下启动服务器(railss-etest)并自行访问页面来手动检查情况是否如此。 关于ruby-on-

  2. ruby-on-rails - Puma .state 文件 - 2

    我正在尝试使用Capistrano部署带有puma的Rails应用程序。在部署结束时它尝试运行bundleexecpumactl-S/home/deployer/production/shared/sockets/puma.state重启失败了/undefinedmethod`has_key?'forfalse:FalseClass.我只是为puma.state创建了一个空文件。我的问题是这个文件到底是什么,里面应该有什么? 最佳答案 Puma有一个状态文件,记录了进程的PID。如果你是第一次部署,你应该删除.state文件,然后做

  3. ruby - 安装libv8(3.11.8.13)出错,Bundler无法继续 - 2

    运行bundleinstall后出现此错误:Gem::Package::FormatError:nometadatafoundin/Users/jeanosorio/.rvm/gems/ruby-1.9.3-p286/cache/libv8-3.11.8.13-x86_64-darwin-12.gemAnerroroccurredwhileinstallinglibv8(3.11.8.13),andBundlercannotcontinue.Makesurethat`geminstalllibv8-v'3.11.8.13'`succeedsbeforebundling.我试试gemin

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - ri 有空文件 – Ubuntu 11.10, Ruby 1.9 - 2

    我正在运行Ubuntu11.10并像这样安装Ruby1.9:$sudoapt-getinstallruby1.9rubygems一切都运行良好,但ri似乎有空文档。ri告诉我文档是空的,我必须安装它们。我执行此操作是因为我读到它会有所帮助:$rdoc--all--ri现在,当我尝试打开任何文档时:$riArrayNothingknownaboutArray我搜索的其他所有内容都是一样的。 最佳答案 这个呢?apt-getinstallri1.8编辑或者试试这个:(非rvm)geminstallrdocrdoc-datardoc-da

  6. ruby - rails 3.2.2(或 3.2.1)+ Postgresql 9.1.3 + Ubuntu 11.10 连接错误 - 2

    我正在使用PostgreSQL9.1.3(x86_64-pc-linux-gnu上的PostgreSQL9.1.3,由gcc-4.6.real(Ubuntu/Linaro4.6.1-9ubuntu3)4.6.1,64位编译)和在ubuntu11.10上运行3.2.2或3.2.1。现在,我可以使用以下命令连接PostgreSQLsupostgres输入密码我可以看到postgres=#我将以下详细信息放在我的config/database.yml中并执行“railsdb”,它工作正常。开发:adapter:postgresqlencoding:utf8reconnect:falsedat

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby-on-rails - RVM、Ruby 1.9.2、Rails 2.3.8、Passenger 和 "invalid byte sequence in US-ASCII" - 2

    我刚刚开始从Ruby1.8.7升级到Ruby1.9.2(使用RVM)。我的所有应用程序都使用“脚本/服务器”(或“rails服务器”)和1.9.2运行,但是,只有Rails3.0.0RC应用程序可以与Passenger一起使用。Rails2.3.8应用给出的错误信息是:invalidbytesequenceinUS-ASCII我猜这是一个Passenger问题。我使用找到的RVM指南安装了Passenger2.2.15here.任何想法如何修复这个错误?谢谢。我已更新以包含堆栈跟踪:/Users/kevin/.rvm/gems/ruby-1.9.2-p0/gems/actionpack

  9. ruby-on-rails - Rails 导入 CSV 错误 : invalid byte sequence in UTF-8 - 2

    尝试在我的Rails应用程序中导入CSV文件时,出现错误UTF-8中的无效字节序列。一切正常,直到我添加了一个gsub方法来将其中一个CSV列与我的数据库中的一个字段进行比较。当我导入CSV文件时,我想检查每一行的地址是否包含在特定客户端的不同地址数组中。我有一个带有alt_addresses属性的客户端模型,其中包含客户端地址的几种不同可能格式。然后我有一个引用模型(如果您熟悉本地SEO,您就会知道这个术语)。引用模型没有地址字段,但它有一个nap_correct?字段(NAP代表“姓名”、“地址”、“电话号码”)。如果CSV行的名称、地址和电话号码与我在该客户的数据库中拥有的相同,

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐