canvas之动态气泡效果
利用canvas和三角函数做了一个简单的起泡效果,每个气泡的圆形都是随机生成的,且气泡线上浮动的路径为三角函数曲线,步骤如下:
1、设置一个循环定时器,随机生成每个圆形的圆心坐标、半径等数据,存储在数组arr中;
2、设置一个循环定时器,取出arr中每个圆的数据;
3、利用一个for循环,通过操作x,y等来实现动画效果,因为canvas中无法直接操作绘制的图形,所以通过不断地清空画布,再绘制不同状态的图形来实现动画效果;为了保证arr不会过大,利用判断,清除arr中不符合要求的对象
4、再利用一个for循环来将圆形绘制到画布上 ;
效果(是动态的,但是懒得弄动图@[email protected]):
完整的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>泡沫效果</title> <style type="text/css"> *{ margin: 0; padding:0; } html,body { height: 100%; overflow: hidden; } canvas{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); background: skyblue; } </style> </head> <body> <canvas height="400" width="150"> <span>无法显示,请换一种浏览器继续尝试,谢谢!</span> </canvas> </body> <script type="text/javascript"> window.onload = function () { var oc = document.querySelector("canvas") if(oc.getContext){ var ctx = oc.getContext("2d") //在画布上随机生成圆 var arr = [] //将数组中的圆绘制到画布上 setInterval(function () { /*console.log(arr)*/ ctx.clearRect(0,0,oc.width,oc.height) for (var i = 0; i < arr.length; i++) { if (arr[i].y <= 50){ arr.splice(i,1) } arr[i].deg+=5 arr[i].x = arr[i].startX + Math.sin(arr[i].deg*Math.PI/180)*arr[i].step*2 ; arr[i].y = arr[i].startY - ( arr[i].deg*Math.PI/180 )*arr[i].step; } //绘制图形 for(var i=0;i<arr.length;i++){ /* console.log(i)*/ ctx.save() ctx.fillStyle = "rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].alp+")" ctx.beginPath() ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI) ctx.fill() ctx.restore() } },1000/60) //往arr数组中存放每一个随机圆的数据 setInterval(function () { var r = Math.random()*6+2 var x = Math.random()*oc.width var y = oc.height - r var red = Math.round(Math.random()*255) var green = Math.round(Math.random()*255) var blue = Math.round(Math.random()*255) var alp = 1 var deg = 0 var startX = x var startY = y var step = Math.random()*20+10 arr.push({ x:x, y:y, r:r, red:red, green:green, blue:blue, alp:alp, deg:deg, startX:startX, startY:startY, step:step }) },50) } } </script> </html>