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));
    }
}

お楽しみください！