如何将 p5.JS canvas 创建代码转换为 HTML Canvas

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.js 这样的库是因为 Canvas 的原生 API 对用户来说不是特别友好。但是，如果你坚持直接使用 Canvas，你应该从 this tutorial on MDN.

开始

特别是关于您示例中使用的方法（createCanvas、fill、rect），existing Whosebug question 涵盖所有这三种方法。

Answer 2

查看基础教程后，像这样转换简单的 p5 很简单 canvas。也就是说，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);
    }
  }
})();

如何将 p5.JS canvas 创建代码转换为 HTML Canvas

How to convert p5.JS canvas creation code to HTML Canvas

javascript

html5-canvas

p5.js