2015-12-03 3 views
0

Этот вопрос может звучать прямо, но я не могу найти ответ в любом месте, где работает. Обработка - это java ide, и вы можете загрузить файл, который преобразует его в javascript. До сих пор у меня естьОбработка Javascript во внешнем файле

<script src="processing.js"></script> 

в заголовках тегов, которые являются файлом, который преобразует его в javascript.

Затем я использую

<script type="application/processing"> 
    void setup() 
    { 
     size(700, 600); 
     background(200); 
    } 
</script><canvas width="700" height="600"></canvas> 

, который показывает пустой серый фон, 700 х 600 так же, как говорит код.

Кто-нибудь знает, как я могу поместить код во внешний документ и запустить его оттуда? Я попытался сохранить код как файл javascript, а также попытаться запустить его из фактического файла .pde (обработка). ничего не работает.

+0

Я попытался переместить ваш код в отдельный файл, но все, что у меня есть, были ошибки перекрестного происхождения в хроме. Следуя примеру, они имеют [здесь] (http://processingjs.org/learning/)/** Написание кода обработки с помощью Javascript ** Мне удалось переместить код сценария в отдельный файл js и все еще работать. Тогда я просто назвал его так: 'на моей странице html – wjvander

ответ

0

Processing.js reference охватывает это.

Вы можете просто поместить свой код в файл .pde (тип файла, используемый обработкой IDE). Processing.js будет компилировать это в JavaScript для вас:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hello Web - Processing.js Test</title> 
    <script src="processing-1.3.6.min.js"></script> 
</head> 
<body> 
    <h1>Processing.js Test</h1> 
    <p>This is my first Processing.js web-based sketch:</p> 
    <canvas data-processing-sources="hello-web.pde"></canvas> 
    </body> 
</html> 

Или вы могли бы написать JavaScript непосредственно, а затем включить его в отдельном файле .js:

В отдельном файле:

function sketchProc(processing) { 
    // Override draw function, by default it will be called 60 times per second 
    processing.draw = function() { 
    // determine center and max clock arm length 
    var centerX = processing.width/2, 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); 
    } 

    // erase background 
    processing.background(224); 

    var now = new Date(); 

    // Moving hours arm by small increments 
    var hoursPosition = (now.getHours() % 12 + now.getMinutes()/60)/12; 
    drawArm(hoursPosition, 0.5, 5); 

    // Moving minutes arm by small increments 
    var minutesPosition = (now.getMinutes() + now.getSeconds()/60)/60; 
    drawArm(minutesPosition, 0.80, 3); 

    // Moving hour arm by second increments 
    var secondsPosition = now.getSeconds()/60; 
    drawArm(secondsPosition, 0.90, 1); 
    }; 
} 

В вашем html-файле:

var canvas = document.getElementById("canvas1"); 
// attaching the sketchProc function to the canvas 
var processingInstance = new Processing(canvas, sketchProc); 
+0

спасибо за попытку помочь, первый не работает, его не показывая мои файл обработки. Я поместил ваш средний код в файл js, но не уверен, как связать его с моим html. вы говорите, чтобы положить нижний бит кода в html, но я думаю, что его javascript – Will

+0

@Will. Нижним битом кода является JavaScript. Я бы поместил его в тег скрипта в ваш html-файл или мог быть в отдельном файле. Для первого я нуждаюсь в дополнительной информации, чем «она не отображается». Что говорит ваша консоль JavaScript? –

+0

Спасибо за помощь. ошибка, которую я получаю, довольно длинная, поэтому я сделал снимок экрана, я надеюсь, что это нормально, если не плохо напечатайте ее [link] https://gyazo.com/22cc5cdb2ba61d9e5b8da26c8a0657d1 – Will

Смежные вопросы