js实现100个不同 大小,颜色,位置 小球的出现

思路:
1.创建一个放置小球的盒子
2.定义一个定时器,记录随机小球出现的时间
3.创建一个小球,并且得给它设置样式
4.利用Math.random个创建得小球定义随机的大小,颜色和位置
5.将创建的这个小球追加到刚开始创建的盒子里面

样式

      * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
        }

        div .wrap {
            position: relative;
        }

        .wrap div {
            position: absolute;
            border-radius: 80px;
        }
<div class="wrap"></div>

js代码

var wrap = document.getElementsByTagName('div')[0];

        var timer = setInterval(randomball, 50);
        var num = 0;

        function randomball() {
            num++;
            //1创建
            var div = document.createElement('div');

            //随即大小
            var wh = ranFun(3, 30);
            div.style.width = wh + 'px';
            div.style.height = wh + 'px';

            //随机颜色
            var r = ranFun(0, 255);
            var g = ranFun(0, 255);
            var b = ranFun(0, 255);
            div.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ')';

            //随机位置
            div.style.left = ranFun(0, window.innerWidth - wh) + 'px';
            div.style.top = ranFun(0, window.innerHeight - wh) + 'px';

            //2追加
            wrap.appendChild(div);
            if (num >= 100) {
                clearInterval(timer);
            }
        }

        function ranFun(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
在HTML5 Canvas上创建一个重力小球动画,首先需要设置一个基础框架,包括创建Canvas元素、获取绘图上下文,并定义一些关键变量,如小球颜色大小和初始位置等。以下是一个简化的步骤: 1. **HTML结构**: ```html <!DOCTYPE html> <html lang="en"> <body> <canvas id="myCanvas" width="800" height="600"></canvas> </body> </html> ``` 2. **JavaScript部分**: ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 随机生成小球属性 function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } function randomBallProperties() { const radius = Math.floor(Math.random() * 50) + 10; // 随机大小范围 const x = Math.random() * canvas.width; // 随机x坐标 const y = Math.random() * canvas.height; // 随机y坐标 return { color: getRandomColor(), radius, x, y }; } // 动画函数 function animate() { const ballProps = randomBallProperties(); // 绘制小球 ctx.beginPath(); ctx.arc(ballProps.x, ballProps.y, ballProps.radius, 0, Math.PI * 2); ctx.fillStyle = ballProps.color; ctx.fill(); // 撞到边界反弹 if (ballProps.x + ballProps.radius > canvas.width || ballProps.x - ballProps.radius < 0) { ballProps.x = ballProps.x + (Math.random() * 2 - 1) * ballProps.radius * 2; } if (ballProps.y + ballProps.radius > canvas.height || ballProps.y - ballProps.radius < 0) { ballProps.y = ballProps.y + (Math.random() * 2 - 1) * ballProps.radius * 2; } requestAnimationFrame(animate); } animate(); ``` 这个例子中,`randomBallProperties` 函数会返回一个包含小球颜色大小位置的对象,然后在 `animate` 函数里,每次循环都会绘制一个新的随机小球,并处理它的碰撞反弹。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值