Question

我正在遇到一个奇怪的问题：代码无法访问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触发时调用。

Answer 1

什么是$？它是Prototype.js吗？我将假设它是jQuery。

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

无论哪种方式，都不能将其视为画布对象。

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

无法访问html5画布？

1 个答案: