canvas实现变色燃烧的火焰动画效果代码-html代码-BFW代码库

canvas实现变色燃烧的火焰动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现变色燃烧的火焰动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body{background:#111}canvas{display:block;left:50%;margin:-150px 0 0 -150px;position:absolute;top:50%}
    </style>
</head>

<body>
    <canvas id="c"></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(b, a) {
                return Math.floor((Math.random() * (a - b + 1)) + b)
            };
        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 = 0.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 > ch + this.radius || this.y .........完整代码请登录后点击上方下载按钮下载查看