本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • html5 canvas告白气球上升背景动画特效
    时间:2019-12-24 12:56 来源:开源之家 作者:开源之家测试提供 下载:76 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:10 KB
    • 运行环境:HTML
    • 下载次数:76 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    html5 canvas告白气球上升背景动画特效

    特效描述:html5 canvas 告白气球上升 背景动画特效,html5基于canvas绘制各种卡通气球上升动画、告白气球背景动画特效。

    代码结构

    1. 引入JS

    1
    <script type="text/javascript" src="js/wmgwdw.js"></script>

    2. HTML代码

    <h1>Balloons</h1>
    <script type="text/javascript">
    var extend = function extend(base) {
      for (var _len = arguments.length, extensions = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        extensions[_key - 1] = arguments[_key];
      }
      return Object.assign.apply(Object, [{}, base].concat(extensions));
    };
    var parseColor = function parseColor(_ref) {
      var h = _ref.h,
          s = _ref.s,
          l = _ref.l,
          a = _ref.a;
      return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')';
    };
    var Color = extend.bind(null, { h: 0, s: 100, l: 100, a: 1 });
    var Vector = extend.bind(null, { x: 0, y: 0 });
    var Particle = extend.bind(null, {
      pos: Vector(),
      vel: Vector(),
      angle: 0,
      speed: 0,
      radius: 0,
      rotation: 0,
      color: Color()
    });
    var colors = [Color({ h: 20, s: 100, l: 50 }), Color({ h: 200, l: 50 }), Color({ h: 300, l: 50 }), Color({ h: 100, l: 40 })];
    var animationLoop = function animationLoop(scope) {
      if (scope.animation) {
        scope.animation(animationLoop.bind(null, scope));
      }
      var ctx = scope.ctx;
      var canvas = ctx.canvas;
      var rc = rough.canvas(canvas);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      scope.particles.map(function (p, i) {
        p.pos.y -= p.speed;
        if (i % 2) {
          p.pos.x = p.pos.x + Math.sin(p.angle) * .2;
        } else {
          p.pos.x = p.pos.x - Math.cos(p.angle) * .2;
        }
        p.angle += .01;
        rc.circle(p.pos.x, p.pos.y, p.radius, {
          fill: parseColor(p.color),
          roughness: Math.random() * 1.5,
          hachureGap: p.hachureGap,
          hachureAngle: p.hachureAngle
        });
        rc.line(p.pos.x, p.pos.y + p.radius * 1.2, p.pos.x, p.pos.y + p.radius / 2, {
          bowing: Math.random() * 3
        });
        if (p.pos.y + p.radius * 3 < 0) {
          p.pos.y = canvas.height + p.radius * 3;
          p.pos.x = Math.random() * (canvas.width - p.radius);
        }
      });
    };
    var scope = {
      animation: requestAnimationFrame.bind(null),
      ctx: document.createElement('canvas').getContext('2d'),
      title: 'Brian Douglas',
      rotation: 0,
      particles: []
    };
    ~function (scope) {
      var canvas = scope.ctx.canvas;
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      document.body.appendChild(canvas);
      var particleCount = 50;
      while (particleCount--) {
        scope.particles.push(Particle({
          pos: {
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height
          },
          speed: Math.random() + .2,
          radius: Math.random() * 60 + 20,
          color: colors[Math.floor(Math.random() * colors.length)],
          hachureAngle: Math.random() * 90,
          hachureGap: Math.random() * 8 + 1
        }));
      }
      animationLoop(scope);
    }(scope);
    if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
      window.addEventListener('resize', function () {
        scope.ctx.canvas.width = window.innerWidth;
        scope.ctx.canvas.height = window.innerHeight;
      });
    }</script>

    html5 canvas告白气球上升背景动画特效

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信