karlew > HTML5特效 > canvas模拟礼花爆炸效果

canvas模拟礼花爆炸效果

1-29 8,224 views

鼠标点击后，彩色的放烟花效果。通过创建对象的方法实现，对象比较多，所以手机上看会挺卡。

demo：http://wx.karlew.com/canvas/boom/

  1. <html>  
  2. <head>  
  3. <title>鼠标点击礼花爆炸效果</title>  
  4. </head>  
  5. <body style="background-color:#000;overflow:hidden">  
  6. <canvas id='canvas'>您的浏览器不支持canvas</canvas>  
  7. </body>  
  8. </html>  
  9.   
  10. <script>  
  11.     var canvas = document.getElementById('canvas')  
  12.     canvas.width = window.screen.width  
  13.     canvas.height = window.screen.height  
  14.     var context = canvas.getContext('2d')  
  15.     var x,y     
  16.     items = []  
  17.     fires = []  
  18.   
  19.     setInterval(loop, 20)  
  20.   
  21.     function loop() {  
  22.         context.clearRect(0, 0, canvas.width, canvas.height)  
  23.         itemsmove()  
  24.         firesmove()  
  25.     }  
  26.   
  27.     function itemsmove(){  
  28.         items.forEach(function(item) {  
  29.             context.beginPath()  
  30.             context.arc(item.x, item.y, item.radius, 0, Math.PI * 2, false)  
  31.             context.fillStyle = 'hsla(' + Math.random() * 360 + ',80%,50%,'+ item.Alpha +')'  //HSLA(H,S,L,A)  
  32.             context.fill()  
  33.   
  34.             item.speedY += 0.2  //0.3为重力加速度  
  35.             item.y += item.speedY  
  36.   
  37.             //如果礼花弹运动到鼠标点击位置则创建爆炸的圆形组并隐藏礼花弹  
  38.             if(item.y<item.boomY&&!item.isBoom){  
  39.                 addfire(item.x,item.boomY)  
  40.                 item.isBoom=true  
  41.                 item.Alpha=0  
  42.             }  
  43.             //如果礼花弹运动到鼠标点击位置前已经开始落下，则创建爆炸的圆形组并隐藏礼花弹  
  44.             if(item.speedY>0&&!item.isBoom){  
  45.                 addfire(item.x,item.y)  
  46.                 item.isBoom=true  
  47.                 item.Alpha=0  
  48.             }  
  49.         })  
  50.     }  
  51.   
  52.     function firesmove(){  
  53.         fires.forEach(function(fire) {  
  54.             context.beginPath()  
  55.             context.arc(fire.x, fire.y, fire.radius, 0, Math.PI * 2, false)  
  56.             context.fillStyle = 'hsla(' + Math.random() * 360 + ',80%,50%,'+ fire.Alpha +')'  //HSLA(H,S,L,A)  
  57.             context.fill()  
  58.   
  59.             //circle对象运动及半径、透明度变化  
  60.             fire.x += fire.speedX  
  61.             fire.speedY += 0.2  //0.3为重力加速度  
  62.             fire.y += fire.speedY  
  63.             fire.radius = fire.radius *0.98  
  64.             fire.Alpha -= 0.01  
  65.         })  
  66.     }  
  67.   
  68.     //跟踪鼠标坐标  
  69.     canvas.onmousemove = function(e) {  
  70.         var position = canvas.getBoundingClientRect()  
  71.         x = e.clientX - position.left * (canvas.width / position.width)  
  72.         y = e.clientY - position.top * (canvas.height / position.height)  
  73.     };  
  74.   
  75.     canvas.onmousedown = function() {  
  76.         additem()  
  77.     }  
  78.   
  79.     function additem(){  
  80.         //爆炸前的礼花弹  
  81.         var item = {  
  82.             x: x,  
  83.             y: window.screen.height,  
  84.             boomY: y,  
  85.             isBoom: false,  
  86.             speedY: -17,  
  87.             radius: 12,  
  88.             Alpha:0.9  
  89.         }  
  90.         items.push(item)  
  91.         if (items.length > 10) {  
  92.             items.shift()  
  93.         }  
  94.     }  
  95.   
  96.     function addfire(a,b){  
  97.         fire = []  
  98.         for (var i = 0; i < 60; i++) {  
  99.             //创建i个爆炸后运动的圆对象  
  100.             fire[i] = {  
  101.                 x: a,  
  102.                 y: b,  
  103.                 speedX: Math.random() * 11 - 5,  
  104.                 speedY: Math.random() * 10 - 6,  
  105.                 radius: 12,  
  106.                 Alpha: 0.6  
  107.             }  
  108.             fires.push(fire[i])  
  109.             //如果实体fires太多，删除旧的对象,避免浏览器卡顿  
  110.             if (fires.length > 600) {  
  111.                 fires.shift()  
  112.             }  
  113.         }  
  114.     }  
  115.   
  116. </script>  

 

完整代码：https://github.com/karlew/canvas/tree/master/firework

版权属于: karlew

原文地址: https://www.karlew.com/archives/109

转载时必须以链接形式注明原始出处及本声明。

欢迎留言