关于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>
