canvas绘制七彩随机小球！

柔光的暖阳◎ 2022-10-15 04:00 200阅读 0赞

## canvas绘制七彩随机小球 ##

### 1、题目 ###

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

### 2、思路 ###

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

### 3、效果展示图 ###

![在这里插入图片描述][20210523141350729.gif_pic_center]

### 4、写法 ###

**创建元素**：

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

![在这里插入图片描述][20210523141847250.png_pic_left]  
**封装随机函数**：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left]

**封装绘制函数**：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 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>

### 6、总结 ###

绘制七彩随机小球，要将**canvas**画布元素的每个属性了解清楚还要学会在页面绘制圆，并且结合定时器让小球运动起来，这是个综合性的练习，用来巩固H5中的**canvas**，大家要多多练习！

[20210523141350729.gif_pic_center]: /images/20221014/ab3732afcbe943e8ae29fe45d689cf5a.png
[20210523141847250.png_pic_left]: /images/20221014/c04c0af3d67d458988c8220c4fa96f63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left]: /images/20221014/2d7fbd9d7e1347a9a996a35b6e72fbad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221014/3744e15c904e4ce6ae9f37ca3a5ba8d0.png