小教程：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 = '#E4E4E4';
context.fillRect(0,0,canvas.width,canvas.height); //生成画布背景色

context.beginPath();
context.fillStyle = '#dd4814';
context.arc(posX, posY, particleRadius, 0 , Math.PI*2, true);
context.closePath();
context.fill();

在线演示&调试地址

第二步： 生成粒子运行效果

动画效果原理：

HTML5 画布动画生成原理，本质来说实现方式就是每隔固定时间段重新绘制画布内的图形，如下是代码：

var canvas = document.getElementById('gbcanvas'),
    context = canvas.getContext('2d'),
    posX = 30,
    posY = 30,
    particleRadius = 30;
      
      
    //定义setInterval来隔特定时间生成粒子，如下
    setInterval(function(){
      //为了能够生成粒子移动效果，我们需要在每次绘制粒子之前清楚界面里的绘图
      context.fillStyle = '#E4E4E4';
      context.fillRect(0,0,canvas.width,canvas.height); //使用背景色填充
      
      posX+=2;
      posY+=1;
      
      context.beginPath();
      context.fillStyle = '#dd4814';
      context.arc(posX, posY, particleRadius, 0, Math.PI*2, true);
      
      context.closePath();
      context.fill();
    }, 10);

以上代码我们使用fillRect方法来先将整个背景色重新填充，再使用arc方法重新绘制圆形，来生成移动的效果

在线演示&调试地址

具体教程点这里呀：http://igeekbar.com/igeekbar/post/172.htm