Canvas context.fillText 抛出“指定了无效或非法的字符串”答案

【问题标题】：Canvas context.fillText throws “An invalid or illegal string was specified”Canvas context.fillText 抛出“指定了无效或非法的字符串”
【发布时间】：2012-03-01 19:59:36
【问题描述】：

我的代码中有一个 Heisenbug。只是偶尔出现，不能故意触发。

FireBug 向我抛出类似“指定了无效或非法字符串”之类的异常，并且每次都引用不同的行。

我使用的是 FireFox 10.0。该网站位于http://www.roboter-club-hamburg.de。我已经尝试过使用 FireQuery，但这会干扰我的代码，所以没有选择。

我已经追踪到如下一行：

context.fillText("[[*longtitle]]", x + 4, y + h + 15, w);

我正在使用 MODX CMS 来构建该网站（这是 [[*longtitle]] 和 [[*id]] 的来源；它们是模板占位符）。

这是该行的完整功能：

($("imagecvs-[[*id]]").ready(function() {
    var canvas = $("#imagecvs-[[*id]]").get(0);
    if (canvas.getContext) {
    var context = canvas.getContext('2d');
    var img = new Image();

    img.src = "[[*Photo]]";

    var scale = 0.6;
    var ratio = img.width / img.height;

    var w = Math.min(img.width * scale, 120);
    var h = w / ratio;
    var x = 0;
    var y = (canvas.height / 2.0) - (h / 2.0);

    var deg = -8;
    var rad = (deg * Math.PI / 180);
    // y += (h / 2) * -Math.sin( rad );
    context.rotate(rad);

    context.fillStyle = "#FFF";
    context.fillRect(x - 5, y - 5, w + 10, h + 30);
    context.drawImage(img, x, y, w, h);

    context.font = "Italic Bold 10px Serif";
    context.textAlign = "left";
    context.textBaseline = "ideographic";
    context.fillStyle = "#000";
    context.fillText("This is a test", x + 4, y + h + 15, w); // Exception thrown here; even with 'This is a test'
    }
    return true;
  }));

【问题讨论】：

将您的代码粘贴到JS Lint 并修复它报告的错误（或者回来询问有关为什么的问题它报告）。
嗯，它不仅仅是一只黑森虫。它也在离我而去。现在我在一个完全不同的地方遇到了同样的例外。现在 FireBug 中的错误消息如下所示：imageshack.us/photo/my-images/17/jqueryerror.jpg
@DavidThomas 如果没有 jQuery，这可能会起作用。它抱怨任何 jQuery 特定指令。
@SeveQ，考虑将您的代码发布到JS Fiddle，然后（在“JavaScript”窗格中使用您的 jQuery）点击“JS Lint”按钮。当我粘贴 jQuery 时，它从未对我产生任何问题，因为它符合 JavaScript 的期望和语法。
@DavidThomas 好吧，这告诉我我的代码是有效的。

标签： javascript jquery html html5-canvas

【解决方案1】：

我现在不知道如何在 FireBug 中执行此操作，但在 WebKit Web Inspector (here for FireBug) 中，您可以选择中断异常。

然后您可以查看调用堆栈以了解您的代码在哪里调用此 JQuery 代码。我不认为问题出在 JQuery 中。您可能将无效参数传递给函数。

【讨论】：

【解决方案2】：

好的，我找到了这个错误的原因。这是由于图像（img）有时在脚本要求其宽度和高度时未完全加载。因此两者都是 NaN 并且脚本崩溃了（fillText 显然不适用于 NaN 的宽度）。

现在，我为解决这个问题所做的只是将绘图步骤移到 img 的 onload 回调中。这样可行。这个海森堡已经不复存在了。

非常感谢！

【讨论】：