第一步 : 在html中创建画布标签 为150*400的画布
第二步 : 给画布设置一个简单的样式
第三布 js代码
结果: 从底部生成气泡 由下而上 气泡运动的速度越来越快
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]; //设置圆点的x circle.x = circle.x + Math.sin(circle.y / 180 * Math.PI) * circle.scale; //设置圆点的y circle.y -= circle.deg; if (circle.y < 0) { circleArr.splice(i, 1) } circle.deg++; } for (var i = 0; i < circleArr.length; i++) { var circle = circleArr[i]; 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(); } }, 100) //生成 setInterval(function () { //定义一个对象存放circle对象 var circle = {}; //坐标 circle.x = Math.random() * canvas.width; circle.y = canvas.height; circle.r = Math.random() * 8 + 2; circle.red = Math.random() * 255; circle.green = Math.random() * 255; circle.blue = Math.random() * 255; circle.opacity = 10; circle.scale = Math.random() * 5 + 5; circle.deg = 1; //每次变化 circleArr.push(circle); }, 50) })(); </script> 本人为前端菜鸟，如上面言论有误，希望大家能在下方评论指出，让菜鸟可以飞一飞~~