canvas能量发射释放光圈射线动画效果代码-html代码-BFW代码库

canvas能量发射释放光圈射线动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas能量发射释放光圈射线动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    html,body {  height: 100%;padding:0;margin:0;}body {  background: #000;  background: radial-gradient(#181818, #000);  overflow: hidden;}body:after {  background: #181818;  background: radial-gradient(#000, #555);  border-radius: 50%;  bottom: 0;  content: '';  left: 0;  margin: auto;  position: absolute;  right: 0;  top: 0;  width: 50px;  height: 50px;  will-change: transform;}canvas {  display: block;}
</style>
</head>

<body>
    <script >
        var $ = {};
 $.rand = function(d, c) {
     return Math.random() * (c - d) + d
 };
 $.Part = function() {
     this.reset()
 };
 $.Part.prototype.reset = function() {
     this.x = 0;
     this.y = 0;
     this.z = 0;
     this.vx = $.rand(-0.5, 0.5);
     this.vy = $.rand(-0.5, 0.5);
     this.vz = $.rand(-0.25, 0.5);
     this.s = 0;
     this.sx = 0;
     this.sy = 0;
     this.life = 1;
     this.decay = $.rand(0.005, 0.02);
     this.radius = $.rand(5, 15);
     this.sradius = this.radius;
     this.rradius = this.radius;
     this.hue = 0;
     this.alpha = 1;
     this.angle = 0
 };
 $.Part.prototype.step = function() {
     if ($.mouse.down) {
         this.vx *= 1.1;
         this.vy *= 1.1;
         this.vz *= 1.1
     } else {
         this.vx *= 1.04;
         this.vy *= 1.04;
         this.vz *= 1.04
     }
     this.x += this.vx;
     this.y += this.vy;
     this.z += this.vz;
     this.s = $.fl / ($.fl + this.z);
     this.sx = this.x * this.s;
     this.sy = this.y * this.s;
     this.sradius = this.radius * this.s;
     this.rradius = Math.max(0.0001, this.sradius * this.life);
     this.angle = Math.atan2(this.sy, this.sx);
     this.hue = (this.angle / (Math.PI * 2)) * 180 + $.tick * 4;
     this.alpha = this.life;
     if (this.z < $.bounds.z.min) {
         this.reset();
         return
     }
     if (this.life > 0) {
         this.life -= this.decay
     } else {
         this.reset()
     }
 };
 $.Part.prototype.draw = function() {
     $.ctx.beginPath();
     $.ctx.arc(this.sx, this.sy, this.rradius * 2, 0, Math.PI * 2);
     $.ctx.fillStyle = "hsla(" + (this.hue + 60) + ", 60%, 30%, " + this.alpha / 3 + ")";
     $.ctx.fill();
     $.ctx.strokeStyle = "hsla(" + (this.hue - 60) + ", 60%, 30%, " + this.alpha / 2 + ")";
     $.ctx.stroke();
     var e = this.angle + Math.PI / 2,
         f = this.angle,
         g = this.angle - Math.PI / 2;
     $.ctx.beginPath();
     $.ctx.moveTo(0, 0);
     $.ctx.lineTo(this.sx + Math.cos(e) * this.rradius, this.sy + Math.sin(e) * this.rradius);
     $.ctx.lineTo(this.sx + Math.cos(f) * this.rradius * 6, this.sy + Math.sin(f) * this.rradius * 6.........完整代码请登录后点击上方下载按钮下载查看