无法访问 html5 画布？答案

【问题标题】：unable to access html5 canvas?无法访问 html5 画布？
【发布时间】：2010-08-20 21:17:42
【问题描述】：

我遇到了一个奇怪的问题：代码无法访问 canvas 元素。考虑这段代码：

this.canvas = document.getElementById('canvas');
this.context2D = this.canvas.getContext('2d');

Firefox 会产生一个错误，比如this.canvas is null。但如果我这样写：

this.canvas = $('#canvas');
this.context2D = this.canvas.getContext('2d');

Firefox 会告诉getContext is not a method。我查看了this.canvas 并看到了一个不熟悉的对象（不知道它来自哪里，但它绝对不是画布）。

这不是 Firefox 独有的，Chrome 也会产生相同的结果。我快疯了。

编辑：整个 html 都在这里

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <title>Background test</title> 
    <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="Scripts/soundmanager2.js"></script> 
    <script type="text/javascript" src="Scripts/base.js"></script>  
    <script type="text/javascript" src="Scripts/Resources.js"></script>
    <script type="text/javascript" src="Scripts/Actor.js"></script> 
    <script type="text/javascript" src="Scripts/Commons.js"></script> 
    <script type="text/javascript" src="Scripts/Graphics.js"></script> 
    <script type="text/javascript" src="Scripts/Utils.js"></script> 
    <script type="text/javascript">
        window.onload = function(){
            new Commons().startupCommons();
            new Graphics().startupGraphics();
        }
    </script>
    <style type="text/css"> 
        body { font-family: Arial,Helvetica,sans-serif;}
        canvas {border-style:solid; border-width:5px; border-color:green;}
    </style> 
</head> 
<body> 
    <canvas id="visualcanvas" width="800" height="600"> 
        <p> 
            Your browser does not support the canvas element.
        </p> 
    </canvas> 
</body> 
</html>

我刚刚添加了 window.onload，但问题仍然存在。前面代码中的this指的是Graphics对象，在window.onload触发时调用。

【问题讨论】：

不知道在哪里可以上传代码？
您可以将其粘贴到问题中。

标签： javascript html canvas

【解决方案1】：

什么是美元？是 Prototype.js 吗？我假设它是 jQuery。

如果你调用jQuery(someselector) 那么你会得到一个jQuery 对象。如果没有匹配选择器的元素，那么它将是一个没有项目的 jQuery 对象。

无论哪种方式，你都不能把它当作画布对象。

第一组代码不起作用，可能是因为在执行 JS 行时 DOM 中没有 id 为“canvas”的元素。这很可能是因为您正在脚本元素中运行 JS，该脚本元素出现在 id 为“canvas”的元素之前（并且没有做任何事情来延迟执行，例如通过文档就绪事件调用它）或者因为您是混淆了 id 属性和标签名称。

【讨论】：

第一部分绝对正确。第二部分可能是真的。
我在 html 中有 canvas 元素。事实上，它之前完美运行。但是在我对javascript进行了一些更改之后，它开始表现得很奇怪，我没有更改html，元素仍然存在。
元素的 id 为“visualcanvas”，您正在寻找一个 id 为“canvas”的元素。正如我在问题中所说的“您混淆了 id 属性和标签名称”（或者您向我们展示的代码与您实际编写的内容不匹配）
好的，这解决了问题。我尝试更改 id 来解决我刚才不记得的问题。最初的问题可能是尝试在不使用 window.onload 的情况下调用这些函数。我拥有你的负担！