如何将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问题涵盖了这三个方法。