canvas粒子球内粒子乱撞动画效果代码

代码语言:html

所属分类:粒子

代码描述:canvas粒子球内粒子乱撞动画效果代码

代码标签: 粒子 乱撞 canvas

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body{margin:0;background:radial-gradient(circle,#217,#000)}canvas{display:block;margin:100px auto;background:radial-gradient(circle,rgba(20,30,7,0.95) 7%,rgba(80,3,240,0.8) 19%,transparent 60%)}
    </style>
</head>

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

    <script>
        var ctx, mid;
        var dots = [],
            target = [];
        var maxForce = 0.1247;
        
        function Vector(a, b) {
            this.x = a;
            this.y = b
        }
        Vector.prototype.add = function(a) {
            this.x += a.x;
            this.y += a.y
        };
        Vector.prototype.sub = function(a) {
            this.x -= a.x;
            this.y -= a.y
        };
        Vector.prototype.mult = function(a) {
            this.x *= a;
            this.y *= a
        };
        Vector.prototype.norm = function() {
            return (Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)))
        };
        Vector.prototype.move = function(a) {
            if (dist(this.x + a.x, this.y + a.y, mid.x, mid.y) > 190) {
                a.mult(-0.43)
            }
            this.add(a)
        };
        
        function Dot(a, b) {
            this.pos = new Vector(a, b);
            this.vel = new Vector(rand(), rand());
            this.vel.mult(5 / this.vel.norm());
            this.acc = new Vector(rand(), rand());
            this.acc.mult(5 / this.acc.norm())
        }
        Dot.prototype.update = function() {
            this.pos.move(this.vel);
            this.vel.add(this.acc);
            this.acc.mult(0)
        };
        Dot.prototype.seek = function(e) {
            var b = new Vector(0, 0);
            b.add(e);
            b.sub(this.pos);
            var a = b.norm();
            b.mult((a < 25) ? -a : a);
            var c = new Vector(0, 0);
            c.add(b);
            c.sub(this.ve.........完整代码请登录后点击上方下载按钮下载查看

网友评论0