草庐IT

【用三大件写出的开门烟花特效】

Aic山鱼 2023-11-03 原文

又到了一年一度的春节时期啦！昨天呢是北方的小年，今天是南方的小年，看到大家可以愉快的放烟花，过大年很是羡慕呀！辞旧岁，贺新春，今年我呀要放烟花，过春节！🧨。

这个特效简单的使用了前端三件套即可完成，html，js，css，canvas整体效果如下GIF图所示（码内隐藏特殊变量，找到有惊喜！）

背景音乐是《China-E》个人感觉很有新年的感觉，整个China系列的歌曲都很nice，该特效的寓意就是开门大吉，辞旧迎新，2023年的大门向你敞开，新的一年想你招手，小兔子抱着锦鲤，也预示着吉祥，山鱼在这里祝大家前兔无量，大展宏兔！

就是开心，就是玩，就是兔个吉利！，话不多说上代码！

<body>
    <!-- 依旧是简洁的html代码 -->
    <canvas id="mycanvas"></canvas>

    <div id="box">
        <button type="button" id="unmuteButton">开启新年音乐</button>
        <button type="button" id="unmuteButton2">关闭新年音乐</button>
        <video id="video" muted autoplay src="./audio/新年音乐.mp3" loop></video>
    </div>
</body>

比较多的css代码，所以单独放在了一个文件下，如果用的时候出现图片丢失的问题，可以看看路径写对了没

/* 如果单独放记得去掉style标签哦 */
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    margin: 0;
    cursor: pointer;
    font-size: 30px;
    background: url("../img/辞旧岁贺新春兔年.png");
    background-size: 100% 100%;
}

#unmuteButton {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    font-size: 10px;
    font-family: "STHupo";
    width: 80px;
    height: 30px;
    border: 1px solid red;
    background-color: rgb(255, 115, 0);
    border-radius: 10%;
}

#unmuteButton2 {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 120px;
    font-size: 10px;
    font-family: "STHupo";
    width: 80px;
    height: 30px;
    border: 1px solid red;
    background-color: rgb(255, 115, 0);
    border-radius: 10%;
}

#video {
    position: absolute;
    top: -100000;
    left: -100000;
}

#box {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#box::before,
#box::after {
    content: '';
    z-index: 99;
    margin-top: -37px;
    float: left;
    width: 50%;
    height: 1000px;
    background: url("../img/兔子2023.png") no-repeat;
    transition: .4s;
}

#box::before {
    float: left;
    background-position: -220px 37px;
}

#box::after {
    float: right;
    background-position: -210px;
}

#box:hover::before {
    transform: translateX(-100%)
}

#box:hover::after {
    transform: translateX(100%)
}

/* 去除滚动条 */
body::-webkit-scrollbar {
    width: 0 !important
}
</style>

比比比比较多的js代码，注意同上

// 烟花生成
window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000)
        }
})();
// 获取画布
var area = document.getElementById("mycanvas");
area.width = document.documentElement.clientWidth;
area.height = document.documentElement.clientHeight;

var ctx = area.getContext("2d");

hue = 120;
timerTick = 0;
timerTotal = 5;
fireworks = [];
particles = [];

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

function distans(sx, sy, tx, ty) {
    var xdistan = sx - tx;
    var ydistan = sy - ty;
    return Math.sqrt((Math.pow(xdistan, 2) + Math.pow(ydistan, 2)));
}

function Firework(sx, sy, tx, ty) {
    this.x = sx;
    this.y = sy;
    this.sx = sx;
    this.sy = sy;
    this.tx = tx;
    this.ty = ty;

    this.targetDistances = distans(sx, sy, tx, ty);

    this.distancesc = 0;

    this.shanyu = [];
    this.shanyucount = 3;
    while (this.shanyucount--) {
        this.shanyu.push([this.x, this.y]);
    }

    this.angle = Math.atan2(ty - sy, tx - sx);
    this.speed = 2;
    this.jiasudu = 1.05;
    this.brightness = random(50, 70);
    this.targetRad = 5;
}

Firework.prototype.update = function (index) {
    this.shanyu.pop();
    this.shanyu.push([this.x, this.y]);

    if (this.targetRad < 8) {
        this.targetRad += 0.3;
    } else {
        this.targetRad = 1;
    }

    this.speed *= this.jiasudu;
    var vx = Math.cos(this.angle) * this.speed;
    var vy = Math.sin(this.angle) * this.speed;

    this.distancesc = distans(this.sx, this.sy, this.x + vx, this.y + vy);

    if (this.distancesc >= this.targetDistances) {

        createparticals(this.tx, this.ty);

        fireworks.splice(index, 1)
    } else {
        this.x += vx;
        this.y += vy;
    }
}


Firework.prototype.draw = function () {
    ctx.beginPath();

    ctx.moveTo(this.shanyu[this.shanyu.length - 1][0], this.shanyu[this.shanyu.length - 1][1]);

    ctx.lineTo(this.x, this.y);

    ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(this.tx, this.ty, this.targetRad, 0, Math.PI * 2);
    ctx.stroke();
}

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.shanyu = [];
    this.shanyucount = 10;
    while (this.shanyucount--) {
        this.shanyu.push([this.x, this.y]);
    }

    this.angle = random(0, 2 * Math.PI);
    this.speed = random(1, 10);
    this.mocal = 0.95;
    this.gravity = 0.98;
    this.hue = random(hue - 20, hue + 20);
    this.brightness = random(50, 80);
    this.alpha = 1;
    this.decay = random(0.015, 0.03);
}

Particle.prototype.update = function (index) {
    this.shanyu.pop();
    this.shanyu.unshift([this.x, this.y]);
    this.speed *= this.mocal;
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed + this.gravity;
    this.alpha -= this.decay;
    if (this.alpha <= this.decay) {
        particles.splice(index, 1)
    }
}
Particle.prototype.draw = function () {
    ctx.beginPath();
    ctx.moveTo(this.shanyu[this.shanyu.length - 1][0], this.shanyu[this.shanyu.length - 1][1]);
    ctx.lineTo(this.x, this.y);
    ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
    ctx.stroke();
}

function createparticals(x, y) {
    var particalcount = 500;
    while (particalcount--) {
        particles.push(new Particle(x, y))
    }
}

var clientw = document.documentElement.clientWidth;
var clienth = document.documentElement.clientHeight;

function loop() {
    requestAnimationFrame(loop);
    hue += 0.5;
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillRect(0, 0, clientw, clienth);
    ctx.fillStyle = 'rgb(0,0,0,0.5)';
    ctx.globalCompositeOperation = 'lighter';
    var i = fireworks.length;
    while (i--) {
        fireworks[i].draw();
        fireworks[i].update(i);
    }
    var i = particles.length;
    while (i--) {
        particles[i].draw();
        particles[i].update(i);
    }
    if (timerTick >= timerTotal) {
        fireworks.push(new Firework(clientw / 2, clienth, random(0, clientw), random(0, clienth)));
        timerTick = 0;
    } else {
        timerTick++;
    }
}
window.οnlοad = loop();
window.onload = function starttime() {
    ptimer = setTimeout(starttime, 1000);
}
// 音乐控制
unmuteButton.addEventListener('click', function () {
    video.muted = false;
});
unmuteButton2.addEventListener('click', function () {
    video.muted = true;
});
结束喽，下一篇新春特效就是下一年喽！
点赞：您的赞赏是我前进的动力！ 👍
收藏：您的支持我是创作的源泉！ ⭐
评论：您的建议是我改进的良药！ ✍
山鱼的个人社区：欢迎大家加入我的个人社区—— 山鱼社区

写出开门this61xff前端htmljavascript

有关【用三大件写出的开门烟花特效】的更多相关文章

  1. 阿里云，华为云，腾讯云三大公有云厂商，香港地区主机测评 - 2

    三大公有云厂商，香港地区主机测评一、ping时延比对（厦门电信本地测试）：Ping时延测试腾讯云阿里云华为云延迟率最低时延44ms，最高72ms，平均46ms47.242段：最低时延59ms，最高204ms，平均107ms最低时延45ms，最高93ms，平均47ms丢包率丢包率小有的ip段丢包率较大每个段都会有概率丢包阿里云：47.242段：最低时延59ms，最高204ms，平均107ms，有的ip段丢包率较大8.210段：最低时延64ms，最高232ms，平均119ms，丢包率较好腾讯云：最低时延44ms，最高72ms，平均46ms，丢包率小华为云：最低时延45ms，最高93ms，平均47m

  2. javascript - 在远程加载的 javascript 中使用 document.write 写出内容——为什么是个坏主意？ - 2

    我不是全职Javascript开发人员。我们有一个网络应用程序，其中一部分是将一个小的信息小部件写入另一个域。这实际上只是一个html表，其中写入了一些值。在过去的8年里，我不得不这样做几次，最后我总是通过一个脚本来完成它，而document.write不在表格中。例如:document.write('hereissomecontent');在theirdomain.com上.........我一直认为这有点丑陋，但效果很好，而且我们始终可以控制内容(或者受信任的代表可以控制您当前的库存等)。所以出现了另一个这样的项目，我使用document.write在大约5分钟内完成了编码。其他人

  3. Unity3D粒子系统之制作烟雾特效 - 2

    Unity3D粒子系统制作烟雾特效本文将会介绍如何使用Unity内的粒子系统制作烟雾效果。如果想了解Unity粒子系统中的基础属性，可以看这篇博客：Unity3D粒子系统之基础属性介绍先附上预览图：制作教程材质贴图首先我们需要一张烟雾材质用的材质贴图，我是自己画的，可以参考下图自己画一张或者去网上找素材。注意，一定要使用黑底的图片。将画好的图片导入Unity中。烟雾材质在Project窗口新键材质，名字和位置随自己习惯。Shader模式选择LegacyShaders/Particles/Additive，将之前导入的贴图拖入ParticleTexture中，如下图所示。这样需要用到的材质就创建

  4. 学习数据结构的手册1---五十万字总结阅读数据结构(用c语言描述+包含三大主流教材+考研工作均可+正在更新) - 2

    声明**本文档不做任何商业用途，是作者个人与团队的学习数据结构的心得笔记以及在考研备考中的学习回顾，加以整理，仅用于学习交流，任何人不得进行有偿销售、本文档的著作权归作者或团队所有，文中部分引用的图片说明来源，特此感谢。任何人使用本文档所述内容所衍生的风险与责任均由其自行承担，本文档的作者或团队不承担任何因此产生的直接或间接损失或责任。同时，本文档的内容仅代表作者或团队的观点和理解，并不代表其他任何组织或个人的观点和立场。读者在阅读和使用本文档时，请自行判断其内容的正确性、准确性和实用性，十分欢迎读者批评指正、提出建议意见，不足之处，多多包涵。**团队微信公众号：CodeLab代码实验室作者C

  5. 不需要任何插件，纯 CSS 就能打造炫酷文字特效 - 2

    前言现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一些文字上面的动画效果，下面一起看看吧。1.文字抖动实现效果实现思路其实主要就是通过animation添加动画属性，利用keyframes来描述动画的开始、过程和结束的状态，核心就是animation+transform:rotate，话不多说，下面直接看代码。完整源码template>divclass="parentBox">divclass="contantBox">文字抖动/div>/div>/template>stylelang="less"scoped>.parentBox{height:1

  6. 【Unity】超简单特效 - 子弹拖尾效果 - 2

    前言：游戏中往往少不了“子弹”，子弹常常需要带着小尾巴，今天我们就来了解并简单在Unity中实现子弹拖尾效果。初步实现：第一步我们还是新建一个场景，这里我们选择2D与黑底摄像机方便观察。然后创建一个空对象作为子弹的父级，再新建2个子对象作为子弹本体和尾巴。接下来我们在Trail上添加TrailRenderer组件，它就说Unity为我们提供的实现拖尾的核心。好，这个时候我们直接在Scene窗口拖动以下Bullet对象，不做其他任何操作，可以看到如下，尾巴已经出来了。Unity的使用者都知道，我们非常讨厌粉色。那么第一件事就说干掉它，那么展开TrailRenderer-Materals，添加De

  7. c# - 如何有条件地以不太冗长的方式写出 XML？ - 2

    我想用C#写一个xml文件。这是一个像这样的基本文件:如果没有Employee节点，我不想有Employees节点...我想使用XElement但我不能因为那个...所以我使用了XmlWriter。它工作正常，但我发现编写XML非常冗长:EmployeeConfigurationconfig=EmployeeConfiguration.GetConfiguration();using(XmlWriterwriter=XmlWriter.Create(_fileUri,settings)){writer.WriteStartDocument();//writer.WriteStartEl

  8. c# - 使用 MemoryStream 写出到 XML - 2

    我注意到将数据写入XML文件的两种不同方法(为简洁起见省略了错误处理)。第一种方法是构建XML文档，然后将XML简单地保存到一个文件中:using(XmlWriterwriter=XmlWriter.Create(fileName)){writer.WriteStartDocument(true);writer.WriteStartElement("parentelement");writer.WriteEndElement();writer.WriteEndDocument();}第二种方法是创建一个MemoryStream，然后将MemoryStream保存到一个文件中:XmlWr

  9. “三箭齐发”，诸葛智能三大产品全新升级，助力企业迈向数字化经营 | 爱分析调研 - 2

     调研：文鸿伟撰写：文鸿伟诸葛智能，是容联云旗下敏捷开放的场景化数据智能服务商，累积服务全国1000+企业，覆盖泛互联网、泛电商、金融、汽车、产业科技、企服等数十个垂直领域。自2015年成立至今，诸葛智能见证并深度参与到中国企业从线下到全渠道、从消费互联网到数字化转型再到如今的产业互联网持续深入的发展历程中。疫情三年，使得企业业务及管理加速数字化，而“乙类乙管”后，面对消费复苏，各行业企业都面临业务快速回涨的过程，企业更加需要对用户进行全域数字化运营以提升经营效率，这对于企业在全域数据、业务及用户洞察分析、智能化营销等方面的能力产生了诸多新的挑战。基于此，2023年3月22日，诸葛智能举办了以

  10. 猿创征文｜C++来时路 _ 重温经典之C++类和对象 | 三大特性之一 - 封装 | 腾讯面试题 - 2

    💛前情提要💛本章节是C++的类和对象-封装的相关知识~接下来我们即将进入一个全新的空间，对代码有一个全新的视角~以下的内容一定会让你对C++有一个颠覆性的认识哦！！！以下内容干货满满，跟上步伐吧~作者介绍：🎓作者：热爱编程不起眼的小人物🐐🔎作者的Gitee：代码仓库📌系列文章&专栏推荐：《刷题特辑》、《C语言学习专栏》、《数据结构_初阶》、《C++轻松学_深度剖析_由0至1》📒我和大家一样都是初次踏入这个美妙的“元”宇宙🌏希望在输出知识的同时，也能与大家共同进步、无限进步🌟🌐这里为大家推荐一款很好用的刷题网站呀👉点击跳转📌导航小助手📌💡本章重点🍞一.类和对象🍞二.类🥐Ⅰ.类的定义🥐Ⅱ.封装🥐Ⅲ

随机推荐