小教程：HTML5画布Canvas绘制生成各种粒子物理动态效果

 

目录：

1. 绘制静态粒子图形效果

2. 添加静态粒子动画效果

3. 添加粒子碰撞动画效果

4. 添加粒子四面碰撞效果

 

基础要求：

1. 了解基础HTML标签，例如canvas标签

2. 了解Javascript的基础知识

 

---

 

第一步： 生成静态粒子图形

生成静态粒子图形，我们将会使用到Canvas的如下相关方法：

 

• context.fillRect(x, y, width, height);
• context.arc(x, y, r, sAngle, eAngle, counterclockwise);

 

其中，使用fillRect方法生成了整个动画场景，布满了画布全部区域，再使用arc方法来生成一个圆形，arc方法本身用来生成圆弧，但是如果生成一个360度的圆弧的话，就自然生成了圆形，完整代码如下：

 

var canvas = document.getElementById('gbcanvas'),
    context = canvas.getContext('2d');

var posX = 30, //定义圆心X坐标
    posY = 30, //定义圆心Y坐标
    particleRadius = 30; //定义半径

context.fillStyle = &#