如何在 html 页面上运行 processingJS 脚本?有人可以给我发送一个测试 .html 和任何辅助代码文件,让我了解一下吗?
假设我想运行这个矩形:
rect(50,50,50,50);
最佳答案
要补充 Kevin 的回答,如果您想将 Processing.js 库与 javascript 而不是 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>
关于javascript - 你如何在 html 上设置 processingJS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39113592/