canvas实现纸屑落下粒子动画效果代码-html代码-BFW代码库

canvas实现纸屑落下粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现纸屑落下粒子动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

    <meta charset="UTF-8">



    <style>
        html, body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          background: #111;
        }
    </style>



</head>

<body>
    <canvas id="world"></canvas>



    <script>
        (function() {
          var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;
        
          NUM_CONFETTI = 350;
        
          COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
        
          PI_2 = 2 * Math.PI;
        
          canvas = document.getElementById("world");
        
          context = canvas.getContext("2d");
        
          window.w = 0;
        
          window.h = 0;
        
          resizeWindow = function() {
            window.w = canvas.width = window.innerWidth;
            return window.h = canvas.height = window.innerHeight;
          };
        
          window.addEventListener('resize', resizeWindow, false);
        
          window.onload = function() {
            return setTimeout(resizeWindow, 0);
          };
        
          range = function(a, b) {
            return (b - a) * Math.random() + a;
          };
        
          drawCircle = function(x, y, r, style) {
            context.beginPath();
            context.arc(x, y, r, 0, PI_2, false);
            context.fillStyle = style;
            return context.fill();
          };
        
          xpos = 0.5;
        
          document.onmousemove = function(e) {
            return xpos = e.pageX / w;
          };
        
          window.requestAnimationFrame = (function() {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
              return window.setTimeout(callback, 1000 / 60);
            };
          })();
        
          Confett.........完整代码请登录后点击上方下载按钮下载查看