html做了一个烟花的效果，初级阶段，做的不好

最新推荐文章于 2023-07-18 23:53:49 发布
最新推荐文章于 2023-07-18 23:53:49 发布
阅读量847 收藏 11
点赞数 1
分类专栏： 技术 文章标签： html5 js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44255794/article/details/104168732
版权

html做了一个烟花的效果，初级阶段，做的不好

直接放代码，有兴趣的可以随便改

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>newfirework</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      
      body {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <canvas id="firework">换个浏览器</canvas>
    <script>
      window.requestAnimFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
          window.setTimeout(callback, 1000 / 60)
        }
      })();
      function init() {
        const firework = document.getElementById("firework")
        const ctx = firework.getContext("2d")
        const width = document.documentElement.clientWidth
        const height = document.documentElement.clientHeight
        firework.width = width
        firework.height = height
        firework.style.background = "#000000"
        ctx.beginPath()
        ctx.fillRect(0,0,width,height)
        const all_num = 20     // 出现的烟花数量
        const radius = 3      // 烟花半径
        const max_length = 16  // 烟花最大长度

        var fireArr = new Array()
        
        for( var i = 0; i < all_num; i++){
          fireArr.push(new FireworkObj(randomX(10, width), randomY(height, 300), radius,
                        Math.floor(Math.random() * 5 + 5), Math.floor(Math.random() * (height / 2)),
                        ctx, randomColor(), max_length))
        }
        console.log(fireArr[0])

        var loop = function(){
          ctx.fillStyle = "#000000"
          ctx.fillRect(0,0,width,height)
          for( var i = 0; i < all_num; i++){
            if(fireArr[i].y <= fireArr[i].height || fireArr[i].speed === 0){
              fireArr[i].judgeSelf(fireArr[i])
              if(fireArr[i].fire.length ===0){
                fireArr[i] = new FireworkObj(randomX(10, width), randomY(height, 10), radius,
                      Math.floor(Math.random() * 5 + 5), Math.floor(Math.random() * (height / 2)),
                      ctx, randomColor(), max_length)  
              }
            }else{
              fireArr[i].drawSelf()
              fireArr[i].updateSelf(fireArr[i])
            }
          }
          requestAnimationFrame(loop)
        }
        loop()
        
      }

      init()

      // 烟花对象
      function FireworkObj(x, y, r, speed, height, ctx, color, maxLength) {
        this.x = x // 烟花初始位置x
        this.y = y // 烟花初始位置y
        this.r = r // 烟花初始半径
        this.speed = speed // 烟花初始速度
        this.height = height  //烟花上升的最高位置
        this.ctx = ctx
        this.color = color
        this.fire = new Array()
        for(var num = 0; num < Math.floor(Math.random()*20 + 10); num++){
          this.fire.push(new FireObj(this.x, this.height, 2, this.color, Math.round(Math.random()) === 1 ? Math.floor(Math.random()*5 + 1) : 0 - Math.floor(Math.random()*5 + 1), -Math.floor(Math.random()*10), this.ctx))
        }
        this.maxLength = maxLength
        this.drawSelf = function() {
          this.ctx.fillStyle = this.color
          
          for(var j = 0;j < Math.floor(this.maxLength);j++){
            this.ctx.beginPath()
            this.ctx.arc(this.x, this.y + 5 * j, this.r - j * 0.2, 0, 2 * Math.PI)
            this.ctx.fill()
          }         
        }
        
        this.updateSelf = function(obj){
          obj.speed = obj.speed - 0.2 > 10 ? obj.speed - 0.2 : 10
          obj.y = obj.y - obj.speed < obj.height ? obj.height : obj.y - obj.speed
          obj.maxLength = obj.maxLength - 0.35 > 1 ? obj.maxLength - 0.35 : 1
        }
        
        this.judgeSelf = function(obj) {
          for(var fireNum = 0; fireNum < obj.fire.length; fireNum++){
            obj.fire[fireNum].updateFire(obj.fire[fireNum].x, obj.fire[fireNum].y)
            if(obj.fire[fireNum].speedX > 0){
              obj.fire[fireNum].speedX = obj.fire[fireNum].speedX - 0.04 > 0 ? obj.fire[fireNum].speedX - 0.04 : 0
            }else if(obj.fire[fireNum].speedX < 0){
              obj.fire[fireNum].speedX = obj.fire[fireNum].speedX + 0.04 < 0 ? obj.fire[fireNum].speedX + 0.04 :0
            }
            obj.fire[fireNum].speedY += 0.7
            obj.fire[fireNum].x += obj.fire[fireNum].speedX
            obj.fire[fireNum].y += obj.fire[fireNum].speedY
            obj.fire[fireNum].drawFire()
            if(obj.fire[fireNum].speedX === 0){
              obj.fire.splice(fireNum)
            }
          } 
        }
      }
      // 爆炸效果对象
      function FireObj(x, y, r, color, speedX, speedY,ctx) {
        this.x = x
        this.y = y
        this.r = r
        this.color = color
        this.speedX = speedX
        this.speedY = speedY
        this.ctx = ctx
        this.movePosition = new Array()
        this.movePosition.push([this.x, this.y])
        
        this.drawFire = function(){
          this.ctx.strokeStyle = this.color
          for(var removeNum = 0; removeNum < 30; removeNum++){
            this.ctx.beginPath()
            this.ctx.lineWidth=1;
            this.ctx.moveTo(this.movePosition[this.movePosition.length -1][0], this.movePosition[this.movePosition.length -1][1]);
            this.ctx.lineTo(this.x, this.y);
            this.ctx.stroke()
          } 
        }
        
        this.updateFire = function(positionX, positionY){
         
          if(this.speedX !== 0 && this.speedY !== 0){
            this.movePosition.pop()    
            this.movePosition.unshift([positionX, positionY])  
          }
        }
      }

      function randomX(min, max){
        return Math.floor((Math.random() * max) + min)
      }
      function randomY(min, max){
        return Math.floor((Math.random() * max) + min)
      }
      function randomColor(){
        return "rgb(" + Math.floor((Math.random() * 255)) + ","
                + Math.floor((Math.random() * 255)) + ","
                + Math.floor((Math.random() * 255)) + ")"
      }
    </script>
  </body>

</html>
稳不住了，他们能赢
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web前端:html烟花代码
SupermarketX的博客
05-18 1万+
该代码内含文字,文字内容可自由发挥,找到代码中这一行,修改内容即可。
❤️创意网页：HTML5 Canvas技术实现绚丽多彩的烟花特效教程
VLOKL的博客
07-19 4086
❤️创意网页：HTML5 Canvas技术实现绚丽多彩的烟花特效教程
程序员过圣诞 | 用HTML写出绽放的烟花
亮点菌
12-25 2万+
2022年圣诞节到来啦，圣诞节是基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。
【除夕最炫烟花代码】—— HTML+JQuery实现2022跨年烟花特效
超梦梦梦梦的博客
01-31 3万+
除夕马上到来，激动的心颤动的手！今年由于管控严厉，许多地方禁止燃放烟花爆竹，既然不让我们放，那我们就用代码来实现烟花特效！文末有彩蛋哦~
烟花代码,予心上人最璀璨烟花—— 附源码与成品（HTML+CSS+JS）
Create value with coding
01-31 4万+
我保证，这将是你见过最炫的????烟花代码！????
使用HTML 实现一个烟花效果
01-01
下面将详细介绍如何使用HTML、CSS和JavaScript来实现一个烟花效果。 首先，我们需要一个基本的HTML结构，它将包含烟花动画的容器： ```html <!DOCTYPE html> <html lang="zh"> , initial-scale=1.0"> <title>...
跨年烟花代码HTML模板效果
12-09
标题中的“跨年烟花代码HTML模板效果”是指利用HTML、CSS和JavaScript技术创建的一个互动的网页特效，模拟了新年或跨年时烟花绽放的场景。这个模板通常用于节日庆祝活动，为网站增添节日氛围，带给用户视觉上的盛宴...
跨年烟花代码html效果
12-09
跨年烟花代码html效果跨年烟花代码html效果跨年烟花代码html效果跨年烟花代码html效果跨年烟花代码html效果跨年烟花代码html效果跨年烟花代码html效果跨年烟花代码html效果跨年烟花代码html效果跨年烟花代码html效果...
用html画一个烟花特效
最新发布
03-27
在HTML中创建烟花特效涉及到多个技术的综合应用，主要包括HTML结构、CSS样式和JavaScript动态效果。下面我们将详细探讨如何利用这些技术实现一个引人入胜的烟花秀。 首先，我们需要理解HTML的基础。HTML (HyperText...
HTML5实现烟花效果
01-14
HTML5是一种强大的网页...总的来说，HTML5的烟花效果是一个结合了HTML、CSS和JavaScript技术的生动实例，展示了现代网页开发的潜力。通过学习这个例子，你可以深入了解这些技术的综合运用，并提升自己的前端开发技能。
有趣的HTML实例（十一） 烟花特效（css+js）
好好读书
02-15 3827
有趣的HTML实例（十一） 烟花特效（css+js） 一款简单的 HTML+CSS+JS 烟花特效（css+js）实例 1、HTML 2、CSS 3、JS 4、舒适的画面感 5、烟花特效 6、自定义文字
创建一个2023年烟花动画的网页，使用HTML、CSS和JavaScript展现视觉饕餮
苏呆仔知识馆
06-03 1344
在本教程中，我们将引导你如何使用HTML、CSS和JavaScript创建一个动态的新年倒计时网页，以2023年为例，这个网页将展现美丽的烟花动画以及醒目的年份倒计时。其中，HTML负责网页结构，CSS负责装饰样式，而JavaScript则赋予网页丰富的交互性。
❤️创意网页：制作一个绚丽的烟花效果（HTML、CSS和JavaScript实现）
VLOKL的博客
07-18 2921
❤️创意网页：制作一个绚丽的烟花效果（HTML、CSS和JavaScript实现）
HTML+CSS+JS制作炫酷【烟花特效】
LuWeien的博客
01-23 8441
/this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。//this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。//this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。//将当前创建的碎片传过去，方便运动和删除。//将当前创建的碎片传过去，方便运动和删除。//将当前创建的碎片传过去，方便运动和删除。//整个构造函数内部都可以使用。//烟花消失，碎片产生。//3.创建烟花的碎片。//烟花消失，碎片产生。//3.创建烟花的碎片。
HTML5+JavaScript制作一个简单的烟花页面
LMX的博客
02-22 1万+
思路分析 想要编写一个烟花程序，首先要了解一个烟花燃放的过程。 可以看到烟花燃放时，内侧的火花较暗而外层的火花明亮。烟花在燃放时会将火药炸开，这些火药飞溅被点燃就出现了烟花，通过加入一些金属使烟花带有丰富的色彩。编写一个烟花程序就是模拟这个爆炸的过程。首先在屏幕上实现丰富色彩很简单（rgba，三元色+透明度），重要的就是模拟爆炸时的这些火药飞溅的情况。这种飞溅的火花效果可以通过一些简单的图形（圆形、方形）移动和变化来得到。分析到这些就可以开始制作了。 这是大体的思路，如果要提高烟花的逼真程度还是需要一些细
【HTML+CSS+JavaScript】实现鼠标点击烟花效果
浅陌繁星的博客
12-27 8417
本文主要分享使用【HTML+CSS+JavaScript】实现鼠标点击烟花效果（爆炸型、心型、圆形）。文章末尾附有完整的代码和图片获取链接。
HTML+Jquery实现2022跨年烟花特效，除夕最炫烟花代码，跨年怎能没有烟花
热门推荐
在下马农的碎碎念
12-31 7万+
2022年跨年烟花代码 2022除夕最炫烟花代码 2022春节烟花代码 2022跨年烟花秀,超好看的跨年烟花秀代码，二十行代码，三分钟就能完成部署。 跨年烟花代码html 2022年跨年烟花代码 跨年烟花代码python 跨年烟花代码c语言 2022跨年烟花代码python 跨年烟花代码c 用c++2010跨年烟花代码 java跨年烟花代码 跨年烟花代码c++ 跨年烟花代码送给朋友 跨年烟花秀送给2021努力的自己
用html5新增标签——canvas实现烟花
m0_73737249的博客
11-08 738
用canva实现烟花特效
如何用html制作一个动态烟花,利用HTML5实现庆祝2018年烟花动画特效
weixin_42282482的博客
06-03 5515
特效描述：利用HTML5实现庆祝2018年烟花动画特效。利用HTML5实现庆祝2018年烟花动画特效代码结构1. HTML代码2018var ctx = document.querySelector('canvas').getContext('2d')ctx.canvas.width = window.innerWidthctx.canvas.height = window.innerHeight...
用html做一个烟花动画
06-02
下面是一个用 HTML、CSS 和 JavaScript 制作的烟花动画示例： HTML 代码： ``` <!DOCTYPE html> <html> 烟花动画 <div class="firework-container"></div> <script src="script.js"></script> </html> ```...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值