要添加到 Kevin 的答案中，如果您想使用带有 javascript 的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>
