随机生成小球（HTML5）

m0_xxx

于 2021-11-28 14:31:14 发布

阅读量952

点赞数 2

文章标签： javascript html html5

本文链接：https://blog.csdn.net/m0_52078599/article/details/121591123

版权

1.css样式

<style>
        #mycanvas{
            background-color: #000;
        }
</style>

2.代码

<body>
    <!-- 需求分析 -->
    <!-- 1.在canvas中随机生成50个小球 -->
    <!-- 1.1 50个小球的大小都不一样(小球半径最大20)，透明度一样 -->
    <!-- 2.小球沿着不同的运动轨迹 -->
    <!-- 2.1小球运动速度和运动方向不一样 -->
    <canvas id="mycanvas" width="600" height="600"></canvas>
    <script>
        // 1.获取元素
        var mycanvas = document.getElementById("mycanvas");
        var context = mycanvas.getContext("2d");
        // 2.管理小球
        var arr = [];
        // 2.1随机生成50个小球 rgba(255,255,255,.5)
        function getrandom(){
            //页面只能生成50个球
            if(arr.length>50){
                clearInterval(timer);
                return false;
            }
            var r = Math.floor(Math.random()*255);
            var g = Math.floor(Math.random()*255);
            var b = Math.floor(Math.random()*255);
            // var bg = `rgba(${r},${g},${b},${Math.random()})`;
            var bg = `rgba(255,255,255,${Math.random()})`;

            //小球的半径
            var xr = Math.floor(Math.random()*20);
            //小球的圆心坐标
            var cx = Math.floor(Math.random()*200) + 200;
            var cy = Math.floor(Math.random()*200) + 200;
            //小坐标的移动距离(正反方向都可移动，数值可为正数和负数，数值不能过大，否则小球移动距离会大，动画效果不连贯)
            // Math.floor(Math.random()*4); 0,1,2,3;向下取整
            var sx = -2 + Math.floor(Math.random()*4);
            var sy = -2 + Math.floor(Math.random()*4);
            var obj = {
                bg: bg,
                xr: xr,
                cx: cx,
                cy: cy,
                sx: sx,
                sy: sy
            }
            //小球坐标移动距离为0的时候，不把小球放进去，否则小球不会动
            if(sx === 0 || sy === 0){
                arr.push(obj);
            }
            console.log("arr",arr);
        }
        var timer = setInterval(getrandom,30);

        // 2.2 将生成的50个小球画到画布上
        function drawBall(){
            context.clearRect(0,0,600,600);
            for(var i = 0;i<arr.length;i++){
                //小球碰撞到边框改变方向(改变方向：让移动的距离取反)
                if(arr[i].cx + arr[i].xr > 600 || arr[i].cx - arr[i].xr <= 0){
                    arr[i].sx = arr[i].sx*-1;
                }
                if(arr[i].cy + arr[i].xr >600 || arr[i].cy - arr[i].xr <= 0){
                    arr[i].sy = arr[i].sy*-1;
                }
                //改变小球的圆心坐标
                arr[i].cx = arr[i].cx + arr[i].sx;
                arr[i].cy = arr[i].cy + arr[i].sy;
                //画球
                context.beginPath();
                context.arc(arr[i].cx,arr[i].cy,arr[i].xr,0,Math.PI*2,false);
                context.fillStyle = arr[i].bg;
                context.fill();
                context.closePath();
            }
        }
        //间隔30秒去画小球，因为小球的位置不一样，就产生了动画的效果
        setInterval(drawBall,30);
    </script>
</body>

m0_xxx

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
随机生成小球（HTML5）

1.css样式<style> #mycanvas{ background-color: #000; } </style>2.代码<body>    ..
复制链接

扫一扫