javascript - 如何在 Javascript 或 CSS 中实现全背景烟雾效果

Question

我正在尝试使用此代码：

http://codepen.io/MIML/pen/iBKyC

canvas {
    position:absolute;
    margin-left : 50%;
    left: -150px;
}

在我的页面底部放一些烟，但我正在搜索如何使用 100% 宽度放置它！

你知道，我页面的所有底部都在散播烟雾。

谢谢。

Answer 1

很酷的发现！通常我们不会为你编写代码，但这个是我的。

首先，将 CSS 代码更改为：

canvas {
  position: absolute;
  width: 100%; height: 200px;
  bottom: 0px; left: 0px;
}

这将跨越整个页面的画布，但不会有足够的“烟雾”。

要添加更多烟雾，请将此spawn()功能替换为！

function spawn() {
    if(new Date().getTime() > lastTime + minSpawnTime) {
      lastTime = new Date().getTime();
      parts.push(new smoke(0, emitterY));
      parts.push(new smoke(50, emitterY));
      parts.push(new smoke(100, emitterY));
      parts.push(new smoke(150, emitterY));
      parts.push(new smoke(200, emitterY));
      parts.push(new smoke(250, emitterY));
      parts.push(new smoke(300, emitterY));
    }
}

希望你喜欢！