在画布中实现气泡
第一步:先定义一个 500*500的画布 <canvas id="wrap" width="500" height="500" ></canvas>
第二步:给画布设置样式
<style> *{ margin: 0; padding: 0; } html,body{
background: #cccccc; } #wrap{ background: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style>
第三步: js代码
<script type="text/javascript"> (function () { //获取画板 var canvas = document.querySelector('#wrap');
if(!canvas.getContext){ return; } //定义绘制对象 var ctx = canvas.getContext('2d');
//定义一个数组存放小圆点 var circleArr=[];
//进行绘制 //开启定时器 setInterval(function () { //清除小圆点 ctx.clearRect(0,0,canvas.width,canvas.height); for (var i = 0; i < circleArr.length; i++) { var circle = circleArr[i]; circle.r ++; //半径不断变大 circle.opacity -=0.01;//透明度不短减小
//点透明度少于0 直接清除 if(circle.opacity<=0){ circleArr.splice(i,1); }
ctx.beginPath(); ctx.fillStyle = 'rgba('+circle.red+','+circle.green+','+circle.blue+','+circle.opacity+')'; ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2); ctx.fill(); }
},16);
setInterval(function () { //开始绘制圆点 var circle = {}; //坐标 circle.x = Math.random() * canvas.width; circle.y = Math.random() * canvas.height;
circle.r = 10; //半径 circle.red = Math.random() * 255; circle.green = Math.random() * 255; circle.blue = Math.random() * 255; circle.opacity = 1; //透明度
circleArr.push(circle); },50)
})()
</script>
希望对您有用
本人为前端菜鸟,如上面言论有误,希望大家能在下方评论指出,让菜鸟可以飞一飞~~
转载请注明原文地址: https://yun.8miu.com/read-53410.html