Canvas 小球连线

Canvas 小球连线

1. 创建canvas画布

1.1 在body标签内创建canvas标签，并添加id元素。

<canvas id="mycanvas"></canvas>

1.2 在script标签中获取dom元素canvas, 并进行设置，第二行为固定写法。

var canvas = document.querySelector("#mycanvas")
var ctx = Context('2d')

1.3 设置画布的宽高分别等于屏幕大小的宽高，宽高分别减10用以呈现完整的画布。

canvas.width = document.documentElement.clientWidth - 10
canvas.height = document.documentElement.clientHeight - 10

1.4 在head头部标签设置画布的样式。 

<style>* {margin: 0;padding: 0;}canvas {display: block;margin: 0 auto;}
</style>

2. 封装小球的构造函数

    function Ball() {this.randomX = il(Math.random() * canvas.width)this.randomY = il(Math.random() * canvas.height)this.r = lor = 'pink'this.dx = il(Math.random() * 10) - 5this.dy = il(Math.random() * 10) - 5this.index = ballArr.lengthif (this.randomX < this.r) {this.x = this.r}else if(this.randomX > canvas.width - this.r) {this.x = canvas.width - this.r}else {this.x = this.randomX}if (this.randomY < this.r) {this.y = this.r}else if(this.randomY > canvas.height - this.r) {this.y = canvas.height - this.r}else {this.y = this.randomY}ballArr.push(this)}

2.1  设置生成小球的随机坐标。

      this.randomX = il(Math.random() * canvas.width)this.randomY = il(Math.random() * canvas.height)

根据画布的宽高来随机生成小球x,y的坐标，il()为向上取整，也可使用Math.floor()同parseInt()向下取整。

2.2 设置小球的半径及颜色。

      this.r = lor = 'pink'

 2.3 设置小球的运动方向。

      this.dx = il(Math.random() * 10) - 5this.dy = il(Math.random() * 10) - 5

生成的数字为1~10之间，需要将生成的数字减5，x轴为负数的球就会往左移动，正数往右；y轴负数往上，正数往下，从而能够达到小球向四面八方运动的一个效果。

2.4 判断小球随机生成的坐标是否让小球在画布之内。

      if (this.randomX < this.r