0

我一直在使用 jquery 和 canvas（不一起）进行一些编码。

我有一个外部 javascript 文件，其中包含；

$(document).ready(function() {
/*
    NAME CHOOSER
*/
var carl = ['Sha', 'Shads', 'Cai', 'Moon', 'Sun', 'Staffy',];
var rosie = ['Mum',];
var prev;
$('button').click(function() {
    prev = $('h2').text();
    $('h2').empty().text(carl[Math.floor(Math.random() * carl.length)] + rosie[Math.floor(Math.random() * rosie.length)]).after('<p>' + prev + '</p>');
});
});

我还有一些用于 canvas 元素的内联 javascript；

<script>
var canvas = document.getElementById('draw');
if(canvas.getContext) {
 var ctx = canvas.getContext('2d');
 ctx.fillStyle = 'red';
 ctx.fillRect(0, 0, 800, 500);
}
</script>

当通过对画布使用内联 javascript 和为 jquery 使用外部文件来分隔时，一切正常并按预期工作。

将内联画布 javascript 添加到外部文件时，画布元素不起作用，但 jquery 起作用。javascript 在 canvas 元素之后加载，因为我的外部 javascript 在结束 body 标记之前链接，此外，如果我从外部文件中删除所有 jquery，canvas 元素将再次开始工作。

为什么是这样？

谢谢

编辑

我现在还尝试将画布代码放在 jquerys 文档就绪函数内部和外部，但它仍然无法正常工作。我将画布代码包装在一个匿名函数中仍然无济于事，甚至尝试使用 jquery 本身选择画布元素，如下所示；

var canvas = $('canvas')[0];

但它还是不想知道。将画布代码放在所有 jquery 之前然后画布代码执行但 jquery 没有，我真的很困惑！将它分开并不打扰我，但我想知道它为什么会发生。

再次感谢。

4

2 回答 2

1

如果您使用浏览器控制台，可能会注意到这个简单的问题。就是这样！您可以按以下方式打开控制台Ctrl+Shift+J：

在主页中：

错误：Uncaught ReferenceError: $ is not defined
解决方案：在您的源代码中链接 jQuery

在名称选择器页面中：

错误：Uncaught TypeError: Cannot read property 'getContext' of null

问题：

您正试图像操作画布一样操作 div，但您无法获取div元素的上下文。所以这是你的 HTML：

<div id="wrap">
   <h1>PORTFOLIO PROJECT <a href="/">:)</a></h1>
   <button>Click here to generate a company name!</button>
</div>

解决方案：

更改<div>为<canvas>

如何避免将来出现此类问题？

使用浏览器控制台，就是这样！

于 2013-02-21T06:50:34.810 回答
0

好的，如果我结合上面的代码，它应该看起来像这样：（请参阅我的 jsFiddle 以获得完整的上下文：http: //jsfiddle.net/mori57/TqamB/）

$(document).ready(function () {
    /*
    NAME CHOOSER
*/
    var carl = ['Sha', 'Shads', 'Cai', 'Moon', 'Sun', 'Staffy'];
    var rosie = ['Mum'];
    var prev;
    $('button').click(function () {
        prev = $('h2').text();
        $('h2').empty().text(carl[Math.floor(Math.random() * carl.length)] + rosie[Math.floor(Math.random() * rosie.length)]).after('<p>' + prev + '</p>');
    });

    var canvas = document.getElementById('draw');
    if(canvas.getContext) {
     var ctx = canvas.getContext('2d');
     ctx.fillStyle = 'red';
     ctx.fillRect(0, 0, 800, 500);
    }
});

而且，在 jsFiddle 的上下文中运行，这非常有效。

因此，要么您没有正确组合这两个脚本（例如，将画布放在文档就绪块之外，或者以某种方式缺少右括号），要么您的脚本文件或标记中存在其他问题。

于 2013-02-21T06:25:06.590 回答