無法使處理腳本運行

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