Question

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

当我将文档加载到浏览器中时，我收到两个错误：

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

和

Access to restricted URI denied

xhr.send(null)

关于第一个错误，我像这样传递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);

Answer 1

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

另外，请记住验证您的“canvas”变量实际上是否包含任何内容。在＆lt; head＆gt;中运行脚本在DOMContentLoaded之前意味着任何document.getElementById将失败：您的代码将在＆lt; body＆gt;之前触发已经建立起来了。在主体的末尾运行脚本，或者（更好）将所有代码都放在函数中并将该函数调用为

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

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

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

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

无法获得处理脚本来运行

1 个答案: