canvas實現酷炫氣泡效果
阿新 • • 發佈:2019-05-09
pre save utf-8 cto osi html ont back splice
canvas
實現動畫主要是靠設置定時器(setinterval()
)和定時清除畫布裏的元素實現,canvas
動畫上手很簡單,今天可以自己動手來實現一個酷炫氣泡效果。
- 氣泡炸裂效果(類似水面波紋)
代碼如下:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>canvas實現氣泡效果</title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; background: gray; } canvas{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: white; } </style> <script> window.onload=function(){ var oc=document.querySelector("canvas"); if(oc.getContext){ var ctx=oc.getContext("2d"); // 定義一個數組,用來保存canvas中各個圓的信息; var arr=[]; //隨機取出數組中的圓,繪制在canvas中; setInterval(function(){ for(var i=0;i<arr.length;i++){ arr[i].r++; arr[i].apl-=0.01; if(arr[i].apl<=0){ arr.splice(i,1); } } ctx.clearRect(0,0,oc.width,oc.height); for(var i=0;i<arr.length;i++){ ctx.save(); ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].apl+")"; ctx.beginPath(); ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI); ctx.fill(); ctx.restore(); } },1000/60); // 向數組中隨機註入圓的信息; setInterval(function(){ var red=Math.round(Math.random()*255); var green=Math.round(Math.random()*255); var blue=Math.round(Math.random()*255); var apl=1; var x=Math.random()*oc.width; var y=Math.random()*oc.height; var r=10; arr.push( { red:red, green:green, blue:blue, apl:apl, x:x, y:y, r:r } ); },50); } } </script> </head> <body> <canvas width="400" height="400"></canvas> </body> </html>
- 氣泡上升效果
代碼如下:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>canvas實現氣泡效果</title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; background: gray; } canvas{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: white; } </style> <script> window.onload=function(){ var oc=document.querySelector("canvas"); if(oc.getContext){ var ctx=oc.getContext("2d"); // 定義一個數組,用來保存canvas中各個圓的信息; var arr=[]; //隨機取出數組中的圓,繪制在canvas中; setInterval(function(){ for(var i=0;i<arr.length;i++){ arr[i].r++; arr[i].apl-=0.01; if(arr[i].apl<=0){ arr.splice(i,1); } } ctx.clearRect(0,0,oc.width,oc.height); for(var i=0;i<arr.length;i++){ ctx.save(); ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].apl+")"; ctx.beginPath(); ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI); ctx.fill(); ctx.restore(); } },1000/60); // 向數組中隨機註入圓的信息; setInterval(function(){ var red=Math.round(Math.random()*255); var green=Math.round(Math.random()*255); var blue=Math.round(Math.random()*255); var apl=1; var x=Math.random()*oc.width; var y=Math.random()*oc.height; var r=10; arr.push( { red:red, green:green, blue:blue, apl:apl, x:x, y:y, r:r } ); },50); } } </script> </head> <body> <canvas width="400" height="400"></canvas> </body> </html>
canvas實現酷炫氣泡效果