如何将文本添加到响应式背景 canvas 到网页？

Question

我想创建一个具有响应式背景的欢迎页面 fiddle
https://codepen.io/JulianLaval/pen/KpLXOO/。
我尝试使用

var ctx = canvasDiv.getContext("2d");
ctx.fillStyle = "RGBA(255, 255, 255, 0.8)";
ctx.fillText("Hi", canvasDiv.width / 2, canvasDiv.height / 2);

但它不起作用。有帮助吗？

Answer 1

问题是您不能不能简单地重用粒子库的canvas——至少不能不修改粒子库本身。

这个库有它自己的 update() 函数，我们可以在这个 github link: ParticleNetwork.prototype.update

看到

所以最初它会清除它的 canvas，绘制粒子并最终安排对自身的调用 - 因此它会不断地以显示刷新率重新绘制 canvas。不，这就是问题所在 - 如果您只是简单地向其绘制内容 canvas，它最终将被此更新函数覆盖。

如果要在 canvas 上绘制文本，则必须在该函数内进行。

例如，找到这些代码行：

  if (this.options.velocity !== 0) {
      requestAnimationFrame(this.update.bind(this));
    }

如果在前面添加以下行：

this.ctx.fillStyle = "RGBA(255, 255, 255, 0.8)";
this.ctx.fillText("Hi", this.canvas.width / 2, this.canvas.height / 2);

你会得到你想要的文字。

How to add text to responsive background canvas to a webpage?