html5 canvas酷炫光束花动画特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

16 62 21


特效描述:酷炫光束花动画。html5 canvas绘制酷炫盛开的光束花朵动画。

代码结构

1. HTML代码

<canvas></canvas>
<script>
'use strict';
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();
  }
  Scene.prototype.reset = 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;
  };
  Scene.prototype.loop = 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();</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
二十二
关注
TA的相关作品 >>更多


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到