roll.gif

---

（以下为个人理解，可能有理解不当或不足之处，望大家批评指正。）

---

Canvas（HTML5新增标签）

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图。

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

---

接下来做一个用canvas实现的弹球效果（效果见上图）

首先在html中新建一个canvas画布，id名myCanvas。

width 属性 :  画布的宽度。这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
height 属性 :  画布的高度。这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

屏幕快照 2016-05-28 下午2.44.03.png

---

在JavaScript中，根据id名获取canvas。
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

建立一个随机函数，参数最小值min， 最大值max。

屏幕快照 2016-05-28 下午2.47.22.png

---

因为弹球的大小、颜色、初始位置、移动速度不同，所以依据上面建立的随机函数，设置弹球的属性。

随机位置
弹球以圆心为中点移动，圆心x坐标移动范围最大为画布宽减半径
判断x坐标是否小于半径，如果小于半径，圆超出画布，则半径值赋给x坐标；如果大于半径，保持初始x坐标（y坐标亦同）。

随机方向
随机设置，判断在0 - 3范围内随机生成的数值是否大于范围内的半数2，如果是，弹球初始方向为正；如果不是，反向移动。

屏幕快照 2016-05-28 下午4.25.32.png

---

在JavaScript中，prototype对象是实现面向对象的一个重要机制。
每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。

给构造函数Round添加原型方法 draw、move
draw 绘制圆
move 弹球移动
判断，碰壁回弹。

屏幕快照 2016-05-28 下午5.42.18.png

---

新建一个数组
新建函数，for循环，设置圆的数量，遍历所有的圆， 调用Round构造函数和draw 、move方法函数。
调用函数。
加到数组中。

新建执行函数，先清空画布。
遍历所有的圆形对象, 让对象自己重绘, 移动
requestAnimationFrame 按帧数执行，执行过程中不断刷新，速率快肉眼不好分辨。所以开始前清空画布，以防重叠。

屏幕快照 2016-05-28 下午5.56.50.png