小视频app源码特效浮动气泡实现的相关代码
在HTML中添加canvas的条目,然后将下面的JS代码copy到下面。两个定时器分别实现更新canvas和更新气泡大小位置等等。
window.onload = function(){ var oc = document.querySelector("canvas"); if (oc.getContext){ var ctx = oc.getContext("2d"); var arr = []; setInterval(function(){ console.log(arr); // 在绘画之前,对数组arr内部的参数值进行改变,以达到运动的效果 ctx.clearRect(0,0,oc.width,oc.height); for(var i =0;i<arr.length;i++){ arr[i].degree++; arr[i].x = arr[i].startX + Math.sin(arr[i].degree* Math.PI/180)*arr[i].step*2; arr[i].y = arr[i].startY - (arr[i].degree* Math.PI/180)*arr[i].step*5; console.log(arr[i].y); if (arr[i].y <= arr[i].r){ arr.splice(i,1); } arr[i].alp-=0.001; } //对已经更改好的数组对应的圆进行绘画。 for (var i = 0; i<arr.length; 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 x = Math.random()*oc.width; var r = Math.random()*10+5; 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 degree = 0; var startX = x; var startY = y; var step = 10; arr.push({ x: x, y: y, r: r, red: red, green: green, blue: blue, alp : alp, degree : degree, startX: startX, startY: startY, step: step }); },200) }
以上就是 小视频app源码特效浮动气泡实现的相关代码,更多内容欢迎关注之后的文章