html5 canvas特效代码（HTML5画布Canvas绘制生成各种粒子物理动态效果）
html5 canvas特效代码（HTML5画布Canvas绘制生成各种粒子物理动态效果）2. 了解Javascript的基础知识1. 了解基础HTML标签，例如canvas标签3. 添加粒子碰撞动画效果4. 添加粒子四面碰撞效果基础要求：
小教程
目录：
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;
在线演示&调试地址
http://www.igeekbar.com/igclass/code/5392196c-400d-466c-b0cb-647bbc3469cc.htm
第二步： 生成粒子运行效果
动画效果原理：
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.arc(posX posY particleRadius 0 Math.PI*2 true);
} 10);
以上代码我们使用fillRect方法来先将整个背景色重新填充，再使用arc方法重新绘制圆形，来生成移动的效果
在线演示&调试地址
http://www.igeekbar.com/igclass/code/d2ff678f-23f1-4cab-9eba-9898d4393017.htm
第三步： 生成粒子碰撞效果
使用HTML5画布生成一个粒子碰撞地面效果，并且同时添加相关重力加速度效果。
首先定义粒子x轴和y轴的运动速度及重力加速度，如下：
speedX = 10 //定义一个X轴方向的速度
speedY = 10 //定义一个Y轴方向的速度
gravity = 1; //定义一个重力的参数，即重力加速度
然后，设置粒子运动速度，即每次绘制粒子圆心坐标的变化，如下：
//以下代码设置运动速度
posX =speedX;
posY =speedY;
同时，保证Y轴拥有一个加速度效果，如下：
//添加重力加速度效果
speedY =gravity;
最后，我们添加一个地面碰撞效果，判断当粒子的中心Y轴低于canvas的高度减去粒子半径，即粒子部分区域低于画布最低端的时候，重新定义粒子的位置，如下：
//接下来我们添加地面反弹效果，只需要判断当粒子运动到近画布底端的时候，粒子Y轴坐标反向
if(posY > canvas.height - particleRadius){
speedY*=-0.5; //这里设置粒子速度为负值，修改此数值可以修改粒子Y轴运动速度损耗量
speedX*=0.5; //这里设置粒子X轴速度的损耗量
posY = canvas.height - particleRadius; //这里当粒子低于画布最低端的时候，设置保证其不消失
}
在线演示&调试地址
http://www.igeekbar.com/igclass/code/8a3cfeb7-b052-4bf7-b3b1-8ec4e59584af.htm
第四步： 生成四面碰壁粒子效果
上面我们生成了粒子碰撞地面效果，本节我们添加粒子四面碰壁效果，基本代码如下：
//判断粒子位于画布右侧可显示区域外
if(posX > canvas.width - particleRadius){
speedX*=-1;
posX = canvas.width - particleRadius;
}
//判断粒子位于画布左侧可显示区域外
if(posX < particleRadius){
speedX*=-1;
posX = particleRadius;
}
//最后添加顶端的反弹效果
if(posY < particleRadius){
speedY*=-1;
posY = particleRadius;
}
大家可以看到，代码基本和碰撞地面效果类似，只不过判断粒子中心所处的坐标位置来修改粒子运动的方向。
在线演示&调试地址
http://www.igeekbar.com/igclass/code/87784219-f527-4f52-bfb2-62cd82bbc07d.htm
Done！以上就是几个HTML5实现粒子物理碰撞的例子， 希望大家能够觉得有用， 有任何问题，请给我留言哈
