Javascript 无法获取要运行的处理脚本

我正在做一个Processing.js教程，可以在这里找到：http://processingjs.org/articles/jsQuickStart.html

将文档加载到浏览器时，出现两个错误：

uncaught exception: called Processing constructor without passing canvas element reference or id.

及

关于第一个错误，我传递canvas元素id如下：

var canvas = document.getElementById('canvas1');

我还检查并确保HTML中的canvas元素具有

canvas1

id

我不确定第二个错误出了什么问题

请帮我看看我做错了什么

这是我的代码：

function sketchProc(processing) {
        processing.draw = function() {
            var centerX = processing.width / 2; 
            var centerY = processing.height / 2;
            var maxArmLength = Math.min(centerX, centerY);

            function drawArm(position, lengthScale, weight) {
                processing.strokeWeight(weight);
                processing.line(centerX, centerY, 
                    centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
                    centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
            }

            processing.background(224);

            var now = new Date();

            var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
            drawArm(hoursPosition, 0.5, 5);
        }
    }

    var canvas = document.getElementById('canvas1');

    var processingInstance = new Processing(canvas, sketchProc);

“拒绝访问受限URI”表明您是从文件：///加载它的，这意味着您无法在任何现代浏览器中加载XHR文件。您必须从本地主机服务器（使用Apache或简单的Python或PHP一行程序）运行它，或者必须将文件联机才能运行草图

另外，请记住验证“canvas”变量是否确实包含任何内容。在before DOMContentLoaded中运行脚本意味着任何document.getElementById都将失败：代码将在构建之前触发。要么在正文末尾运行脚本，要么（最好）将所有代码都放在一个函数中，并按如下方式调用该函数

document.addEventListener("DOMContentLoaded",myfunction,false):

确保在函数的第一行添加一个额外的行：

function myfunction() {
  document.removeEventListener("DOMContentLoaded",myfunction,false);
  [...]

或者，如果您使用prototype、dojo、jquery等框架，那么您只能在构建页面后使用它们的构造来执行JS。

“拒绝访问受限URI”表明您是从file:///加载的，这意味着您无法在任何现代浏览器中加载XHR文件。您必须从本地主机服务器（使用Apache或简单的Python或PHP一行程序）运行它，或者必须将文件联机才能运行草图

另外，请记住验证“canvas”变量是否确实包含任何内容。在before DOMContentLoaded中运行脚本意味着任何document.getElementById都将失败：代码将在构建之前触发。要么在正文末尾运行脚本，要么（最好）将所有代码都放在一个函数中，并按如下方式调用该函数

document.addEventListener("DOMContentLoaded",myfunction,false):

确保在函数的第一行添加一个额外的行：

function myfunction() {
  document.removeEventListener("DOMContentLoaded",myfunction,false);
  [...]

---

或者，如果您使用prototype、dojo、jquery等框架，那么您只能在构建页面之后使用它们的构造来执行JS。

初始化处理对象的代码在哪里？它是否在

中的

块中，在

之前？如果是这样，那么对“getElementById（）”的调用将找不到任何东西，因为DOM还没有生成。@Pointy--将代码放在页面底部会有帮助。但我不喜欢这样构造代码。有没有办法从外部调用processing.js代码？或者将其放在顶部？是的，将其放在“onload”处理程序中，或者放在

的末尾会有所帮助。如果您遇到语法错误，那就意味着出现了语法错误：-）@Pointy——我如何才能将所有脚本标记保留在页面顶部，同时仍然执行processing.js代码？

onload

处理程序似乎不起作用。将代码放在文档底部是可行的，但这是最后一种方法。如果操作正确，将代码放在“onload”处理程序中会起作用。将脚本放在

末尾并不是一件坏事，事实上这是JavaScript世界中许多知识渊博的人推荐的做法。初始化处理对象的代码在哪里？它是否在

中的

块中，在

之前？如果是这样，那么对“getElementById（）”的调用将找不到任何东西，因为DOM还没有生成。@Pointy--将代码放在页面底部会有帮助。但我不喜欢这样构造代码。有没有办法从外部调用processing.js代码？或者将其放在顶部？是的，将其放在“onload”处理程序中，或者放在

的末尾会有所帮助。如果您遇到语法错误，那就意味着出现了语法错误：-）@Pointy——我如何才能将所有脚本标记保留在页面顶部，同时仍然执行processing.js代码？

onload

处理程序似乎不起作用。将代码放在文档底部是可行的，但这是最后一种方法。如果操作正确，将代码放在“onload”处理程序中会起作用。将脚本放在

的末尾并不是一件坏事，事实上这是JavaScript世界中许多知识渊博的人推荐的做法。