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

代码语言:html

所属分类:动画

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

代码标签: 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 = t.........完整代码请登录后点击上方下载按钮下载查看

网友评论0