canvas绘制七彩随机小球！

最新推荐文章于 2024-07-04 17:08:47 发布

小猫爱摸鱼

最新推荐文章于 2024-07-04 17:08:47 发布

阅读量673

点赞数 1

分类专栏： js html 文章标签： html5

本文链接：https://blog.csdn.net/wsh20210301/article/details/117194420

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

本文通过HTML5的canvas元素，详细介绍了如何创建并动画化多个不同大小、颜色、位置的七彩小球。首先在页面上创建画布，然后生成随机函数来设定小球的属性，包括颜色、位置、半径和移动方向。接着封装绘制函数，判断小球边界并调整其运动方向。最后，通过定时器让小球在画布上动态移动，实现了一个生动有趣的视觉效果。这是一个巩固canvas技能的好练习。

摘要由CSDN通过智能技术生成

canvas绘制七彩随机小球

1、题目

拿到一个案例，需要在画布上实现不同大小颜色位置的七彩小球，并且要运动起来！

2、思路

（1）、第一步需要在页面上创建画布元素，创建一个数组用来存放随机小球的个数；
（2）、第二步封装一个随机函数，定义圆的位置坐标cx,cy 圆的半径xr ,圆的背景颜色bg,圆每次移动的步长sx,sy，用随机数表示它们，并且把它们放入一个对象中，方便定时器的调用；例如：当数组中存放的小球数量达标了，我们就清楚定时器；
（3）、第三部封装一个函数用来绘制刚刚创建的小球，并且渲染到画布上；
（4）、在渲染之前需要判断小球移动的范围和方向，超出边界我们就取反改变小球所移动的方向，并且绘制小球；
（5）、调用定时器，让小球运动起来；

3、效果展示图

在这里插入图片描述

4、写法

创建元素：

创建画布，获取画布，获取画笔；
创建一个存放100个随机小球的数组；

在这里插入图片描述
封装随机函数：

判断小球的个数，当定时器调用创建了数量等于100时我们就清除它，不在创建啦；
设置小球的颜色样式，位置，大小，移动距离，移动方向，利用随机数实现的；
将刚刚设置的小球的每一个元素放入到一个对象中，方便以后的调用；
每隔30ms调用下定时器创建一个小球，知道创建到100个为止；

在这里插入图片描述

封装绘制函数：

判断小球运动的范围以及方向，由于刚刚创建的画布的宽度高度都为600，小球的半径范围为0 -20，小球的圆心坐标范围为200~400，小球每次移动的距离为-2到1之间，所以当小球移动到画布边缘时，我们就让步长取反将小球的移动方向反过来到达小球运动的目的；
设置小球移动的方向，让他们的原点坐标加上步长
将小球绘制在画布上，并且设置小球的背景颜色；
调用定时器让小球运动起来，实现效果；

在这里插入图片描述

5、参考代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #mycanvas{
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="600" height="600"></canvas>
    <script>
        // 随机生成100个小球
        // 大小不一样  颜色也不一样 移动速度不一样  移动方向不一样
        var mycanvas = document.getElementById("mycanvas")
        var cxt = mycanvas.getContext("2d")
        var arr = [];//装100个小球的对象

        function getrandom(){
            //当数组存放了100个小球清楚定时器，将不再产生不同的小球
            if(arr.length > 100){
                clearInterval(timer)
            }
            //设置随机颜色，采用rgba形式的
            var r = Math.floor(Math.random()*256)
            var g = Math.floor(Math.random()*256)
            var b = Math.floor(Math.random()*256)
            var a = Math.random()//透明度

            //随机颜色
            var bg = "rgba("+ r +","+ g +","+ b +",1)"
            //半径
            var xr = Math.floor(Math.random() * 20)
            //坐标  圆的位置坐标 cx 横坐标  cy 纵坐标
            var cx = 200 + Math.floor(Math.random()*200)
            var cy = 200 + Math.floor(Math.random()*200)

            // 每次移动的步长 sx 左右移动的步长 sy 上下移动的步长
            var sx = -2 + Math.floor(Math.random() * 4)// -2 -1 0 1
            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)
        }

        var timer = setInterval(getrandom,30)

        // 封装函数绘制上面所创建的50个小球渲染在画布上面
        function shop(){
            cxt.clearRect(0,0,600,600)
            for(var i = 0 ;i< arr.length;i++){
                // 判断边界，取反改变小球移动方向
                if(arr[i].xr + arr[i].cx > 600 || arr[i].cx - arr[i].xr <= 0){
                    arr[i].sx *= -1;
                }
                if(arr[i].xr + arr[i].cy > 600 || arr[i].cy - arr[i].xr <= 0){
                    arr[i].sy *= -1;
                }
                // 小球移动 上下左右
                arr[i].cx += arr[i].sx;
                arr[i].cy += arr[i].sy;

                // 绘制随机小球
                cxt.beginPath()
                cxt.arc(arr[i].cx,arr[i].cy,arr[i].xr,0,Math.PI * 2);
                cxt.fillStyle = arr[i].bg;
                cxt.fill()
                cxt.closePath()
            }
        }
        setInterval(shop,30)
        
    </script>
</body>
</html>