JavaScript实现微信聊天烟花效果

最新推荐文章于 2023-09-05 15:34:43 发布

原创

最新推荐文章于 2023-09-05 15:34:43 发布 · 9.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文详细介绍了如何使用HTML5 canvas在微信8.0中实现烟花效果，通过JavaScript控制粒子运动、颜色渐变和消失，为用户提供沉浸式的视觉体验。

微信8.0烟花效果实现


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<style>
  html,
  body {
   
   
    width: 100%;
    height: 100vh; 
	overflow:hidden;
	margin:0;
	padding:0
  }
  #start{
   
   
	  position:fixed;
	  bottom:0;
	  left:0;
	  right:0;
	  margin:auto;
  }
  
</style>

<body>
	
  <button id="start">点击开始</button>
  <script>
    var raf = (function () {
   
   
      var TIME = Math.floor(1000 / 60);
      var frame, cancel;
      var frames = {
   
   };
      var lastFrameTime = 0;

      if (typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function') {
   
   
        frame = function (cb) {
   
   
          var id = Math.random();

          frames[id] = requestAnimationFrame(function onFrame(time) {
   
   
            if (lastFrameTime === time || lastFrameTime + TIME - 1 < time) {
   
   
              lastFrameTime = time;
              delete frames[id];

              cb();
            } else {
   
   
              frames[id] = requestAnimationFrame(onFrame);
            }
          });

          return id;
        };
        cancel = function (id) {
   
   
          if (frames[id]) {
   
   
            cancelAnimationFrame(frames[id]);
          }

最低0.47元/天解锁文章