你如何在html上设置processingJS？
[英]How do you setup processingJS on html?
问题描述
如何在html页面上运行processingJS脚本？ 有人可以给我发一个测试.html和任何辅助代码文件给我一个想法吗？
假设我想运行这个矩形：
rect(50,50,50,50);
2 个解决方案
解决方案1
0 2016-08-24 14:01:33
您想知道的一切都在此页面上： JavaScript快速入门| Processing.js
但基本上，您需要创建一个加载Processing.js库的html文件，然后编写Processing.js代码并将.pde文件加载到.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>
最简单的方法是使用Processing编辑器中的JavaScript模式（您可能必须使用2.2.1版本），然后单击run。 然后，您可以查看编辑器创建的文件（转到视图>草图文件夹），以便更好地了解幕后发生的情况。
解决方案2
0 2016-08-27 03:30:12
要添加到Kevin的答案，如果您想使用带有javascript而不是pde（java）代码的Processing.js库，这可能会让您更容易深入了解。
*请注意，一些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>
如何在HTML上设置Processing.js库？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.