无法访问html5画布？

Question

I'm stumling upon a weird problem: The code just wont be able to access the canvas element. 我正在遇到一个奇怪的问题：代码无法访问canvas元素。 Consider this code: 考虑以下代码：

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

Firefox would produce an error say this.canvas is null . Firefox会产生错误，例如this.canvas is null 。 But if I write it like this: 但如果我这样写：

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

Firefox would tell getContext is not a method . Firefox会告诉getContext is not a method 。 I looked into this.canvas and see an unfamiliar object (no idea where it comes from but it definitely not a canvas). 我查看了this.canvas并看到了一个不熟悉的对象（不知道它来自哪里，但绝对不是画布）。

And this is not exclusive to Firefox, Chrome produce the same result. 而这并不是Firefox所独有的，Chrome产生了同样的结果。 I'm getting crazy over this. 我对此感到疯狂。

edit: the entire html is here 编辑：整个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>

I just added window.onload, but the problem persist. 我刚刚添加了window.onload，但问题仍然存在。 this in the before code refer to the Graphics object, which is call when window.onload fire. this在前面的代码中引用了Graphics对象，这是在window.onload fire时调用的。

Answer 1

What is $? 什么是$？ Is it Prototype.js? 它是Prototype.js吗？ I'm going to assume it is jQuery. 我将假设它是jQuery。

If you call jQuery(someselector) then you will get a jQuery object. 如果你调用jQuery(someselector)那么你将获得一个jQuery对象。 If there are no elements that match the selector, then it will be a jQuery object with no items in it. 如果没有与选择器匹配的元素，那么它将是一个没有项目的jQuery对象。

Either way, you can't treat it as a canvas object. 无论哪种方式，您都不能将其视为画布对象。

The first set of code doesn't work, probably, because there is no element with the id 'canvas' in the DOM at the time the line of JS is executed. 可能，第一组代码不起作用，因为在执行JS行时，DOM中没有id为'canvas'的元素。 This is most likely because you are running the JS in a script element that appears before the element with the id 'canvas' (and haven't done anything to delay execution, such as calling it via the document ready event) or because you are confusing the id attribute and the tag name. 这很可能是因为您在一个脚本元素中运行JS，该元素出现在具有id“canvas”的元素之前（并且没有做任何延迟执行的事情，例如通过文档就绪事件调用它）或者因为你是混淆id属性和标记名称。

无法访问html5画布？

问题描述

1 个解决方案

解决方案1
4 已采纳 2010-08-20 12:59:12

无法访问html5画布？

问题描述

1 个解决方案

解决方案1 4 已采纳 2010-08-20 12:59:12

解决方案1
4 已采纳 2010-08-20 12:59:12