Question

我一直在使用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添加到外部文件时，canvas元素不起作用，但jquery是。在canvas元素之后加载javascript，因为我的外部javascript在关闭body标记之前被链接，而且如果我从外部文件中删除所有jquery，canvas元素将再次开始工作。

为什么会这样？

由于

修改

我现在也尝试将画布代码放在jquerys文件就绪函数中，并且在它之外，它仍然无法正常工作。我已经将匿名函数中的画布代码包装起来仍无济于事，甚至尝试用jquery本身选择canvas元素，如下所示;

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

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

再次感谢。

Answer 1

如果您使用浏览器控制台，则可以注意到这些简单问题。那就是它！您可以按Ctrl+Shift+J：

打开控制台

在主页：

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

在namechooser页面中：

错误：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>

如何避免这样的未来问题？

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

Answer 2

好的，如果我将上面的代码组合在一起，它应该是这样的:(请参阅我的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的上下文中运行，这非常有效。

所以，要么你没有正确地组合两个脚本（例如，将画布放在文档就绪块之外，或者以某种方式错过了一个右括号），或者你的脚本文件或标记中还有其它错误。< / p>

Jquery和canvas代码不能在同一个外部文件上运行

2 个答案:

在主页：

在namechooser页面中：

如何避免这样的未来问题？