原生js实现一个canvas多彩粒子烟花随鼠标喷射动画效果代码

代码语言:html

所属分类:粒子

代码描述:原生js实现一个canvas多彩粒子烟花随鼠标喷射动画效果代码

代码标签: 多彩 粒子 烟花 喷射 动画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        canvas {
          left: 50%;
          margin: -200px 0 0 -200px;
        	position: absolute;
          top: 50%;
        }
    </style>


</head>

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

    <script>
        var b = document.body;
   var c = document.getElementsByTagName('canvas')[0];
   var a = c.getContext('2d');
   h = 400;
   p = [];
   j = 0;
   k = 0;
   u = 0;
   m = Math;
   q = function(e, b) {
       return ~~(m.random() * (b - e + 1) + e);
   };
   d = "Infinity";
   c.width = 400;
   c.height = h;
   document.bgColor = "#111";
   c.style.background = "#000";
   c.addEventListener("mousemove", function(e) {
       j = m.floor(e.pageX - c.offsetLeft - 200);
       k = m.floor(e.pageY - c.offsetTop - h / 2);
       e = -(-k / -j);
       u = m.floor(m.atan(e) * (180 / m.PI));
       0 > j && 0 > k && (u += 180);
       0 > j && 0 < k && (u += 180);
       0 < j && 0 < k && (u += 360);
       0 > k && e == "-" + d && (u = 90);
       0 < k .........完整代码请登录后点击上方下载按钮下载查看

网友评论0