无法使处理脚本运行

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单行程序），或者必须将文件放在网上才能运行草图。

另外，请记住验证您的“画布”变量实际上是否包含任何内容。 在DOMContentLoaded之前在<head>中运行脚本意味着任何document.getElementById都会失败：您的代码将在构建<body>之前触发。 要么在主体的末尾运行脚本，要么（更好）将所有代码粘贴到一个函数中，然后将该函数调用为

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

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

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

或者，如果您使用诸如prototype，dojo，jquery之类的框架，则仅在页面建立后才能使用它们的构造来执行JS。

无法使处理脚本运行

问题描述

1 个解决方案

解决方案1
1 2013-03-08 15:02:29

无法使处理脚本运行

问题描述

1 个解决方案

解决方案1 1 2013-03-08 15:02:29

解决方案1
1 2013-03-08 15:02:29