逼真的火焰

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var canvas = document.getElementById("c"),
    $ = canvas.getContext("2d"),
    palette = ['#ff2121', '#ff7221', '#ffe420'],
    flames = [];

var w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight;

var center = {
  x: w / 2,
  y: h / 2
};

function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

var Circle = function () {
  function Circle(center, speed, palette) {
    _classCallCheck(this, Circle);

this.x = center.x;
    this.y = center.y;
    this.angle = randomInRange(Math.PI + Math.PI / 2.75, Math.PI * 2 - Math.PI / 2.75);
    this.vx = speed * Math.cos(this.angle);
    this.vy = speed * Math.sin(this.angle);
    this.r = randomInRange(6, 12);
    this.color = palette[Math.floor(Math.random() * palette.length)];
  }

Circle.prototype.update = function update(w, h, objectsArray) {
    this.x += this.vx *= 1.005;
    this.y += this.vy *= 1.005;
    this.r -= .031;
    if (this.x + this.r < 0 || this.x - this.r > w || this.y - this.r > h || this.r <= 0) {
      objectsArray.splice(objectsArray.indexOf(this), 1);
    }
  };

Circle.prototype.render = function render($) {
    $.strokeStyle = this.color;
    $.beginPath();
    $.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    $.stroke();
  };

return Circle;
}();

(function loop() {
  $.clearRect(0, 0, w, h);
  if (Math.random() > .18) flames.push(new Circle(center, 1 + Math.random(), palette));
  for (var i = 0; i < flames.length; i++) {
    flames[i].update(w, h, flames);
    flames[i].render($);
  }
  requestAnimationFrame(loop);
})();

window.addEventListener('resize', function () {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  center.x = w / 2;
  center.y = h / 2;
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg