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

代码语言:html

所属分类:粒子

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

代码标签: 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;
          };
       
          drawCi.........完整代码请登录后点击上方下载按钮下载查看

网友评论0