2024情人节/除夕/新年快乐+表白，3D粒子动态特效+烟花，可直接运行（附赠源码：文章尾）

马上就要迎接新年了，新的一年祝大家兔管纤纤着重彩，龙行龘龘创未来！！

1.代码效果展示

2.代码展示

var S = {
  init: function () {
    var action = window.location.href,
        i = action.indexOf('?a=');
 
    S.Drawing.init('.canvas');
    document.body.classList.add('body--ready');
 
    if (i !== -1) {
      S.UI.simulate(decodeURI(action).substring(i + 3));
    } else {
      S.UI.simulate('|#countdown 4||除|夕|快|乐|阿贵学长|兔管纤纤着重彩|龙行龘龘创未来|2024 HAPPY NEW YEAR');
    }
 
    S.Drawing.loop(function () {
      S.Shape.render();
    });
  }
};
 
 
S.Drawing = (function () {
  var canvas,
      context,
      renderFn
      requestFrame = window.requestAnimationFrame       ||
                     window.webkitRequestAnimationFrame ||
                     window.mozRequestAnimationFrame    ||
                     window.oRequestAnimationFrame      ||
                     window.msRequestAnimationFrame     ||
                     function(callback) {
                       window.setTimeout(callback, 1000 / 60);
                     };
 
  return {
    init: function (el) {
      canvas = document.querySelector(el);
      context = canvas.getContext('2d');
      this.adjustCanvas();
 
      window.addEventListener('resize', function (e) {
        S.Drawing.adjustCanvas();
      });
    },
 
    loop: function (fn) {
      renderFn = !renderFn ? fn : renderFn;
      this.clearFrame();
      renderFn();
      requestFrame.call(window, this.loop.bind(this));
    },
 
    adjustCanvas: function () {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    },
 
    clearFrame: function () {
      context.clearRect(0, 0, canvas.width, canvas.height);
    },
 
    getArea: function () {
      return { w: canvas.width, h: canvas.height };
    },
 
    drawCircle: function (p, c) {
      context.fillStyle = '#e2005d';
      context.beginPath();
      context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
      context.closePath();
      context.fill();
    }
  }
}());
 
 
S.UI = (function () {
  var canvas = document.querySelector('.canvas'),
      interval,
      isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),
      currentAction,
      resizeTimer,
      time,
      maxShapeSize = 30,
      firstAction = true,
      sequence = [],
      cmd = '#';
 
  function formatTime(date) {
    var h = date.getHours(),
        m = date.getMinutes(),
    m = m < 10 ? '0' + m : m;
    return h + ':' + m;
  }
 
  function getValue(value) {
    return value && value.split(' ')[1];
  }
 
  function getAction(value) {
    value = value && value.split(' ')[0];
    return value && value[0] === cmd && value.substring(1);
  }
 
  function timedAction(fn, delay, max, reverse) {
    clearInterval(interval);
    currentAction = reverse ? max : 1;
    fn(currentAction);
 
    if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
      interval = setInterval(function () {
        currentAction = reverse ? currentAction - 1 : currentAction + 1;
        fn(currentAction);
 
        if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
          clearInterval(interval);
        }
      }, delay);
    }
  }
 
  function reset(destroy) {
    clearInterval(interval);
    sequence = [];
    time = null;
    destroy && S.Shape.switchShape(S.ShapeBuilder.letter(''));
  }
 
  function performAction(value) {
    var action,
        value,
        current;
 
    // overlay.classList.remove('overlay--visible');
    sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));
    // input.value = '';
    // checkInputWidth();

3.源码

2024除夕/新年快乐，3D粒子动态特效，HTML，js实现