js实现canvas多彩变色火苗燃烧动画效果代码-html代码-BFW代码库

js实现canvas多彩变色火苗燃烧动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas多彩变色火苗燃烧动画效果代码

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

<html>
<head>
    <style>
        body {
            background: #111;
        }

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

</head>
<body >
    <canvas id="c" width="300" height="300"></canvas><script>
        var c = document.getElementById('c'),
        ctx = c.getContext('2d'),
        cw = c.width = 300,
        ch = c.height = 300,
        parts = [],
        partCount = 200,
        partsFull = false,
        hueRange = 50,
        globalTick = 0,
        rand = function(min, max) {
            return Math.floor((Math.random() * (max - min + 1)) + min);
        };

        var Part = function() {
            this.reset();
        };

        Part.prototype.reset = function() {
            this.startRadius = rand(1, 25);
            this.radius = this.startRadius;
            this.x = cw/2 + (rand(0, 6) - 3);
            this.y = 250;
            this.vx = 0;
            this.vy = 0;
            this.hue = rand(globalTick - hueRange, globalTick + hueRange);
            this.saturation = rand(50, 100);
            this.lightness = rand(20, 70);
            this.startAlpha = rand(1, 10) / 100;
            this.alpha = this.startAlpha;
            this.decayRate = .1;
            this.startLife = 7;
            this.life = this.startLife;
            this.lineWidth = rand(1, 3);
        }

        Part.prototype.update = function() {
            this.vx += (rand(0, 200) - 100) / 1500;
            this.vy -= this.life/50;
            this.x += this.vx;
            this.y += this.vy;
            this.alpha = this.startAlpha * (this.life / this.startLife);
            this.radius = this.startRadius * (this.life / this.startLife);
            this.life -= this.decayRate;
            if (
                this.x > cw + this.radius ||
                this.x < -this.radius ||
                this.y.........完整代码请登录后点击上方下载按钮下载查看