Как запустить сценарий обработки js на странице html? Может ли кто-нибудь отправить мне тестовый файл .html и любые вспомогательные файлы кода для меня, чтобы получить представление?Как вы настраиваете обработку JS на html?
Скажем, я хотел, чтобы запустить этот прямоугольник:
rect(50,50,50,50);
Все, что вы хотите знать, находится на этой странице: JavaScript Quick Start | Processing.js
Но в принципе, вам нужно сделать, создать HTML-файл, который загружает Обработка .js, затем напишите код Processing.js и загрузите файл .pde в тег canvas на этой странице. Это выглядит следующим образом:
<!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 в редакторе обработки (вы, возможно, придется использовать версию 2.2.1), затем нажмите кнопку запуска. Затем вы можете просмотреть файлы, созданные редактором (перейти к просмотру> папке эскиза), чтобы лучше понять, что происходит под капотом.
Чтобы добавить ответ Кевина, если вы хотите использовать библиотеку Processing.js с яваскриптом кода, а не PDE (Java) это может сделать его немного легче погружаться в.
* Обратите внимание, что некоторые люди JavaScript может сжиматься при использовании with(obj){code}, но я даю это в качестве примера, чтобы развязать код и сделать его менее подробным. Используйте свое собственное мнение в зависимости от обстоятельств.
Также убедитесь, что библиотека обработки находится в той же папке, что и ваш файл, с приведенным ниже кодом, а имя файла указано в приведенном ниже коде.
Наслаждайтесь!)
<html>
<head>
</head>
<body>
<canvas id="output-canvas"></canvas>
<script src="processing.1.4.8.js"></script>
<script> (function() {
new Processing (document.getElementById ("output-canvas"), sketch);
function sketch (pjs) {
// some initilization if you prefer
// set the canvas size
pjs.size (800, 600);
// (0, 0, 0, 0) - if you want a transparent sketch over some backdrop
pjs.background (255, 255, 255, 255);
// make the ugly pjs go away
with (pjs) {
// red stroke
stroke (255, 0, 0);
// thick border
strokeWeight (5);
// yellow fill
fill (255, 240, 0);
// draw a rectangle
rect (50, 50, 300, 200);
}
}
})(); </script>
</body>
</html>