如何將 p5.JS 畫布創建代碼轉換為 HTML 畫布

Question

我如何將這個 p5.js 代碼翻譯成 Canvas？ 例如， createCanvas方法不在 Canvas 中。 draw()和setup()也是如此。

 function setup() { createCanvas(300, 300); } function draw() { background(50); for (var r = 0; r < 10; r++) { for (var c = 0; c < 10; c++) { stroke(0); fill(10 * r, 10 * c, 255) rect(30, 30, 30, 30); } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

Answer 1

在查看基本畫布上的教程后，像這樣轉換簡單的 p5 很簡單。 也就是說，p5 在后台做了很多工作，並將更多的功能打包到createCanvas之類的調用中，所以如果你發現你只是在重新發明它已經提供的許多抽象或使用高級特性，那么最好只使用 p5。

rect(30, 30, 30, 30); 只是一遍又一遍地在同一個地方畫畫，所以我假設你想要rect(30 * r, 30 * c, 30, 30);

此外，由於您沒有制作任何動畫，因此最好使用 p5 的noLoop並完全跳過requestAnimationFrame ，因為它只是在消耗 CPU 周期。

 const canvas = document.createElement("canvas"); document.body.appendChild(canvas); canvas.width = canvas.height = 300; const ctx = canvas.getContext("2d"); (function draw() { requestAnimationFrame(draw); ctx.fillStyle = "rgb(50, 50, 50)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for (let r = 0; r < 10; r++) { for (let c = 0; c < 10; c++) { ctx.fillStyle = `rgb(${10 * r}, ${10 * c}, 255)`; ctx.fillRect(30 * r, 30 * c, 30, 30); ctx.strokeStyle = "#000"; ctx.strokeRect(30 * r, 30 * c, 30, 30); } } })();

Answer 2

存在像 p5.js 這樣的庫是因為 Canvas 的本機 API 不是特別用戶友好。 但是，如果您堅持直接使用 Canvas，您應該從MDN 上的本教程開始。

特別是關於您的示例中使用的方法（createCanvas、fill、rect），這個現有的 StackOverflow 問題涵蓋了所有三個。