js生成canvas烟雾动画效果代码

代码语言:html

所属分类:粒子

代码描述:js生成canvas烟雾动画效果代码

代码标签: 烟雾 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
body {
  background: #000;
}

canvas {
  height: 1000px;
  width: 1000px;
}
</style>




</head>

<body >
  <canvas width="1000px" height="1000px"></canvas>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
      <script >
var smoke = new Image();
smoke.src = '//repo.bfw.wiki/bfwrepo/image/5fcd694ea3e61.png';

$.fn.emitter = function (opts) {
  var particles = [];
  var canvases = [];

  var particle = function (canvas) {
    var x, y, size, speedX, speedY, opacity;
    reset();

    this.update = function () {
      if (opacity > 0) {
        opacity -= Math.random() / opts.speed.fade;
      }

      if (opacity <= 0) {
        reset();
      }

      speedX -= Math.random() / opts.speed.acceleration;
      speedY -= Math.random() / opts.speed.acceleration;
      x += speedX;
      y += speedY;
      size += Math.random();
      drawParticle(x, y, size, opacity);
    };

    function drawParticle(x, y, size, opacity) {
      canvas.global.........完整代码请登录后点击上方下载按钮下载查看

网友评论0