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 = t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0