使用canvas写随机小球

关于canvas宽高

canvas宽高设置的注意事项：canvas默认 width为300px、height 为 150px,虽然canvas的宽高可以通过css样式来设置，但是不建议使用css设置，因为宽高属性和初始比例不一致，就会出现扭曲，所以一般设置宽高我们都会使用行内。

创建canvas元素

<canvas width="500" height="500" id="mycanvas"></canvas>

script板块内容

    <script>
        var mycanvas = document.getElementById('mycanvas')
        var c = mycanvas.getContext('2d')
        //创建一个数组，用来存储小球也就是圆
        var arr = []
        //这是定时器
        var time = null;
        //封装一个随机数函数，等会画圆的时候可以用到
        function setNum(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        //封装一个函数，设置小球的数据
        function shuju() {
            //判断，当我生成50个随机不同颜色不同大小的小球，把它放到数组里面
            //如果超过50个小球，清除定时器
            if (arr.length >= 50) {
                clearInterval(time)
                //如果不return的话，它会有51个小球，所以这里return一下就可以
                return
            }
            //随机生成小球的颜色,a表示色彩空间
            var qiuColor = 'rgba(' + setNum(0, 255) + ',' + setNum(0, 255) + ',' + + setNum(0, 255) + ',' + Math.random() + ')'
            //小球的随机半径
            var rs = setNum(5, 20)
            //小球的x轴的随机圆心
            var rx = setNum(50, 450)
            //小球的y轴的随机圆心
            var ry = setNum(50, 450)
            //小球的x轴的随机步长，正反方向都可移动，数值可为正数和负数，数值不能过大，否则小球移动距离会大，动画效果不连贯。
            var mx = setNum(0, 4)
            //小球的y轴的随机步长
            var my = setNum(0, 4)
            var obj = {
                rs: rs,
                rx: rx,
                ry: ry,
                mx: mx,
                my: my,
                rc: qiuColor
            }
            //判断，obj里面mx或my
            //如果mx或者my为的0时候，代表小球是不会动的，所以要把它筛选掉。
            if (mx == 0 || my == 0) {
                return
            }
            //把mx或者my不为0的放到创建的数组里面
            arr.push(obj)
        }
        time = setInterval(shuju, 10)
        //封装一个函数，通过arr里面的随机数据来创建小球（圆），把小球显示到画布上面
        function showArc() {
            //清空画布
            c.clearRect(0, 0, 500, 500)
            //遍历arr里面的数据来生成小球
            arr.forEach(function (ele, i) {
                //ele数组对象里面小球的数据
                // console.log(ele);
                //i是索引
                // console.log(i);
                //判断当小球的x轴的圆心+半径>500（画布的宽度）就是说明它碰到了画布右边的边框，让它往相反的方向移动，左边同理
                if (ele.rx + ele.rs > 500 || ele.rx - ele.rs < 0) {
                    ele.mx *= -1
                }
                //  //判断当小球的y轴的圆心+半径>600（画布的高度）就是说明它碰到了画布上面的边框，让它往相反的方向移动，下边同理
                if (ele.ry + ele.rs > 500 || ele.ry - ele.rs < 0) {
                    ele.my *= -1
                }
                ////改变小球的圆心坐标
                ele.rx += ele.mx
                ele.ry += ele.my
                //下面是制作小球的数据，我相信你能看到
                c.beginPath()
                c.fillStyle = ele.rc
                c.arc(ele.rx, ele.ry, ele.rs, 0, Math.PI * 2)
                c.fill()
                c.closePath()
            })
        }
        setInterval(showArc, 10)
    </script>