canvas练习之-烟花效果的小球

Posted 2021-06-14 妖娆的油条2号

1. 烟花效应

   <script>
   ​
       /**
        * 关键点：
        * 1. 球的速度：x轴方向速度不变，y轴方向的速度的大小和方向不断变化-变化规律可以参照物理学中的中重力加速度，这里我自己随便定义了一个变化标准
        * 2. 球的描绘：以定时器的每次执行为单位，获取小球在这段时间内运动的距离，以算出小球当前的x/y轴，将这些数据保存在数组中，以便同时绘制多个小球当前时间点的位置。
        * 3. 随机速度、随机颜色
       */
       /** @type {htmlCanvasElement} */
       var myCanvas = document.getElementById(\'myCanvas\')
       var cxt = myCanvas.getContext(\'2d\')
   ​
       // 画布的宽度和高度
       var cw = 500
       var ch = 600
   ​
       // 小球半径
       var roll = 20
   ​
       // 所有球的起始位置
       var startX = cw/2
       var startY = ch + roll
   ​
       // 重力加速度
       var g = 0.6
   ​
       // 小球的起始x方向速度-确保所有小球的速度在2-5之间，正数向左，负数向右
       function startVX() {
         var fu = Math.random() > 0.5 ? 1 : -1
         return (Math.random()*3 + 2) * fu
       }
   ​
       // 获取小球起始y方向速度:20-30之间
       function startVY() {
         return Math.random()*10 + 20
       }
   ​
       // 烟花的颜色
       function color() {
         return `rgb(${Math.random()*155 + 100}, ${Math.random()*155 + 100}, ${Math.random()*155 + 100})`
       }
   ​
       // 实现多个小球的移动
       function drawFire(ver) {
         var rollArr = []
         // 小球的xy坐标
         setInterval(() => {
           myCanvas.width = cw
           myCanvas.height = ch
   ​
           var copyRollArr = [...rollArr]
           // 小球移动位置
           rollArr.forEach(item => {
             cxt.fillStyle = item.rollColor
             cxt.beginPath()
             item.rollX = item.rollX + item.verX
             item.verY = item.verY - g
             item.rollY = item.rollY - item.verY
             cxt.arc(item.rollX, item.rollY, roll, 0, 2*Math.PI)
             cxt.closePath()
             cxt.fill()
           })
   ​
           // 创建小球
           var rollColor = color()
           cxt.fillStyle = rollColor
           cxt.beginPath()
           cxt.arc(startX, startY, roll, 0, 2*Math.PI)
           cxt.closePath()
           cxt.fill()
           rollArr.push({
             rollX: startX,
             rollY: startY,
             verX: startVX(),
             verY: startVY(),
             rollColor
           })
   ​
           // 从数组中移除画框范围的球
           if (rollArr.length > 80) {
             rollArr.shift()
           }
         }, 50)
       }
   ​
       drawFire(30)