专栏首页大前端(横向跨端 & 纵向全栈)HTML5 Canvas炫酷的火焰风暴动画

HTML5 Canvas炫酷的火焰风暴动画

今天给大家分享一个用Canvas写的火焰风暴动画,实现效果如下:

怎么样,场面是不是很壮观,下面是代码实现,欢迎大家复制粘贴和吐槽。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5 Canvas炫酷的火焰风暴动画</title>
</head>

<body>
    <script src="canvas.js"></script>
    <canvas width="600" height="400"></canvas>
</body>

</html>

下面是上面代码中引入的canvas.js的代码。

var c = document.createElement('canvas'),
    ctx = c.getContext('2d'),
    w = c.width = 600,
    h = c.height = 400,
    particles = [],
    particleCount = 1000,
    particlePath = 4,
    pillars = [],
    pillarCount = 110,
    hue = 0,
    hueRange = 60,
    hueChange = 1,
    gravity = 0.1,
    lineWidth = 1,
    lineCap = 'round',
    PI = Math.PI,
    TWO_PI = PI * 2;

function rand(min, max) {
    return Math.random() * (max - min) + min;
}

function distance(a, b) {
    var dx = a.x - b.x,
        dy = a.y - b.y;
    return Math.sqrt(dx * dx + dy * dy);
}



function Particle(opt) {
    this.path = [];
    this.reset();
}

Particle.prototype.reset = function () {
    this.radius = 1;
    this.x = rand(0, w);
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.hit = 0;
    this.path.length = 0;
};

Particle.prototype.step = function () {
    this.hit = 0;

    this.path.unshift([this.x, this.y]);
    if (this.path.length > particlePath) {
        this.path.pop();
    }

    this.vy += gravity;

    this.x += this.vx;
    this.y += this.vy;

    if (this.y > h + 10) {
        this.reset();
    }

    var i = pillarCount;
    while (i--) {
        var pillar = pillars[i];
        if (distance(this, pillar) < this.radius + pillar.renderRadius) {
            this.vx = 0;
            this.vy = 0;
            this.vx += -(pillar.x - this.x) * rand(0.01, 0.03);
            this.vy += -(pillar.y - this.y) * rand(0.01, 0.03);
            pillar.radius -= 0.1;
            this.hit = 1;
        }
    }
};

Particle.prototype.draw = function () {
    ctx.beginPath();
    ctx.moveTo(this.x, ~~this.y);
    for (var i = 0, length = this.path.length; i < length; i++) {
        var point = this.path[i];
        ctx.lineTo(point[0], ~~point[1]);
    }
    ctx.strokeStyle = 'hsla(' + rand(hue + (this.x / 3), hue + (this.x / 3) + hueRange) + ', 50%, 30%, 0.3)';
    ctx.stroke();

    if (this.hit) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, rand(1, 25), 0, TWO_PI);
        ctx.fillStyle = 'hsla(' + rand(hue + (this.x / 3), hue + (this.x / 3) + hueRange) + ', 80%, 15%, 0.1)'
        ctx.fill();
    }
};


function Pillar() {
    this.reset();
}

Pillar.prototype.reset = function () {
    this.radius = rand(50, 100);
    this.renderRadius = 0;
    this.x = rand(0, w);
    this.y = rand(h / 2 - h / 4, h);
    this.active = 0;
};

Pillar.prototype.step = function () {
    if (this.active) {
        if (this.radius <= 1) {
            this.reset();
        } else {
            this.renderRadius = this.radius;
        }
    } else {
        if (this.renderRadius < this.radius) {
            this.renderRadius += 0.5;
        } else {
            this.active = 1;
        }
    }
};

Pillar.prototype.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.renderRadius, 0, TWO_PI, false);
    ctx.fill();
};

function init() {
    ctx.lineWidth = lineWidth;
    ctx.lineCap = lineCap;

    var i = pillarCount;
    while (i--) {
        pillars.push(new Pillar());
    }

    document.body.appendChild(c);
    loop();
}


function step() {
    hue += hueChange;

    if (particles.length < particleCount) {
        particles.push(new Particle());
    }

    var i = particles.length;
    while (i--) {
        particles[i].step();
    }

    i = pillarCount;
    while (i--) {
        pillars[i].step();
    }
}

function draw() {
    ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1)';
    ctx.fillRect(0, 0, w, h);

    ctx.globalCompositeOperation = 'lighter';
    var i = particles.length;
    while (i--) {
        particles[i].draw();
    }

    ctx.globalCompositeOperation = 'source-over';
    i = pillarCount;
    ctx.fillStyle = 'rgba(20, 20, 20, 0.3)';
    while (i--) {
        pillars[i].draw();
    }
}


function loop() {
    requestAnimationFrame(loop);
    step();
    draw();
}

init();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript中的 this的理解

    在JavaScript编程中 , this的关键字总是让初学者感到迷惑 , this到底是什么呢?

    越陌度阡
  • Vue 实现下拉加载更多

    熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法:

    越陌度阡
  • JavaScript 设计模式学习第十篇-建造者模式

    建造者模式(Builder Pattern)又称生成器模式,分步构建一个复杂对象,并允许按步骤构造。同样的构建过程可以采用不同的表示,将一个复杂对象的 构建层与...

    越陌度阡
  • 干货 | 用uni-app制作迷你PS小程序

    ? ? 该文章主要讲解最近基于 uni-app 框架编写的集图文拖拽等多方位编辑、油墨电子签名、开放式海报于一体的小程序的制作思路和实现代码。 1、完整源码链...

    腾讯NEXT学位
  • 寿司开卖:实现寿司制作特效和音响特效

    本节我们将继续上一节完成若干个小功能。首先要完成的是,当客户动画在主页面出现时,它左上角会冒泡,显示它想购买何种寿司,此时玩家可以点击左下角面板中各种元素,组合...

    望月从良
  • Java基础:五、this关键字、static含义(4)

    如果只有一个peel()方法,如何知道是被a还是b所调用的呢?因为编译器会把“所操作对象的引用”作为第一次参数传递给peel()。所以上述两个方法的调用就变成了...

    桑鱼
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌
  • 确认过眼神,你是喜欢Stream的人

    摘要:在学习Node的过程中,Stream流是常用的东东,在了解怎么使用它的同时,我们应该要深入了解它的具体实现。今天的主要带大家来写一写可读流的具体实现,就过...

    用户2145235

扫码关注云+社区

领取腾讯云代金券