带刺的花动画效果

Html

Css

body {
	background:#000;
	overflow:hidden;
}
canvas {
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
}

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

var Scene = function() {
      function Scene() {
          var _this = this;

_classCallCheck(this, Scene);

this.PI = Math.PI;
          this.TAU = this.PI * 2;
          this.GOLDEN = (Math.sqrt(5) + 1) / 2;
          this.canvas = document.querySelector('canvas');
          this.ctx = this.canvas.getContext('2d');
          this.dpr = window.devicePixelRatio;
          this.reset();
          window.addEventListener('resize', function() {
              return _this.reset();
          });
          this.loop();
      }

_createClass(Scene, [{
          key: 'reset',
          value: function reset() {
              this.width = window.innerWidth;
              this.height = window.innerHeight;
              this.hwidth = this.width * 0.5;
              this.hheight = this.height * 0.5;
              this.canvas.width = this.width * this.dpr;
              this.canvas.height = this.height * this.dpr;
              this.ctx.scale(this.dpr, this.dpr);
              this.ctx.translate(~~this.hwidth, ~~this.hheight);
              this.ctx.globalCompositeOperation = 'lighter';
              this.tick = 320;
          }
      }, {
          key: 'loop',
          value: function loop() {
              var _this2 = this;

requestAnimationFrame(function() {
                  return _this2.loop();
              });
              this.tick++;
              this.ctx.clearRect(-this.hwidth, -this.hheight, this.width, this.height);
              var count = 150;
              var angle = this.tick * -0.001;
              var amp = 0;
              for (var i = 0; i < count; i++) {
                  angle += this.GOLDEN * this.TAU + Math.sin(this.tick * 0.03) * 0.001;
                  amp += (i - count / 2) * 0.01 + Math.cos(this.tick * 0.015) * 1;
                  var x = Math.cos(angle) * amp + Math.cos(this.tick * 0.0075) * (count - i) * 0.3;
                  var y = Math.sin(angle) * amp + Math.sin(this.tick * 0.0075) * (count - i) * 0.3;
                  var radius = 0.1 + i * 0.02;
                  var scale = 0.1 + amp * 0.1;
                  var hue = this.tick + angle / this.TAU * 0.4 + 60;
                  var saturation = 90;
                  var lightness = 60;
                  var alpha = 0.7 + Math.cos(this.tick * 0.03 + i) * 0.3;

this.ctx.save();
                  this.ctx.translate(x, y);
                  this.ctx.rotate(angle);
                  this.ctx.scale(scale, 1);
                  this.ctx.rotate(this.PI * 0.25);
                  this.ctx.fillStyle = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + alpha + ')';
                  this.ctx.fillRect(-radius, -radius, radius * 2, radius * 2);
                  this.ctx.restore();

this.ctx.beginPath();
                  this.ctx.arc(x, y, radius * 12, 0, this.TAU);
                  this.ctx.fillStyle = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + alpha * 0.05 + ')';
                  this.ctx.fill();
              }
          }
      }]);

return Scene;
  }();

var scene = new Scene();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

带刺的花动画效果



代码描述：运用canvas

利用canvas绘制动画

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

爱是如此深辰

相关代码