HTML5粒子发射效果

原创 2015年04月23日 09:27:58

最近一直在研究HTML5的粒子效果,参考了很多资料,也研究了很多大神的作品,可还是一知半解,觉得云里雾里。不过,无意间我发现了一篇文章,叫《七步学做HTML5 Canvas粒子喷射动画》,网址是:http://www.108js.com/article/article3/30277.html?id=1177

小编我参考这篇文章,并稍加修改,完成了自己想要的效果。下面就把源码附上:

<!DOCTYPE HTML>
 <html lang="en">
  <meta charset="utf-8">
  <head><title>Draw a Circle</title>
   <style type="text/css">
    body {
      background-color: #000000;
      margin: 0px;
      overflow: hidden;
    }
   </style>
  </head>
 <body>
<script>
  var	canvas = document.createElement( 'canvas' ),
  context = canvas.getContext( '2d' );
  var canvasWidth = window.innerWidth; 
  canvasHeight = window.innerHeight;
  var mylines = [];
 var myline = new MyLine(1357.3581337957253,389.95216244936756,1335.1900222318359,439.901328672196,2,30,"#FFFFFF");
 mylines.push(myline);
 
 
 
  init();
 
  function init() {
    document.body.appendChild(canvas); 
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
setInterval(loop, 150);
  }
 
  function loop(){
context.clearRect(0,0,canvas.width,canvas.height);
for(var mI = 0 ; mI < mylines.length ; mI++){
var myline = mylines[mI];
myline.draw();
myline.update();
}
  }
  
  //画一个拖尾巴的线
  //该线存在起点和终点,长度,半径大小,颜色
  function MyLine(sx,sy,ex,ey,rad,len,color){
this.sx = sx;
this.sy = sy;
this.ex = ex;
this.ey = ey;
this.rad = rad;
this.len = len;
this.color = color;
this.tx = this.sx;
this.ty = this.sy;
this.xFlage = 0;
this.yFlage = 0;
//判断起始位置大小
if(sx <= ex){
this.xFlage = 1;
}else{
this.xFlage = 0;
}
if(sy <= ey){
this.yFlage = 1;
}else{
this.yFlage = 0;
}
//角度
  	this.angle = Math.atan2( this.ey - this.sy, this.ex - this.sx );
//开始画
this.draw = function(){
context.beginPath();
context.fillStyle = this.color;
context.globalAlpha = 0.5;
for(var i = 0; i < this.len ; i++ ){
context.arc(this.tx,this.ty,((this.len - i)/this.len) * this.rad, 0, Math.PI*2, true);
this.tx -= Math.cos(this.angle) * this.len * 0.05;
this.ty -= Math.sin(this.angle) * this.len * 0.05;
}
context.closePath();
context.fill();
}
//更新
this.update = function(){
var tXF = 0;
var tYF = 0;
if(this.sx <= this.ex){
tXF = 1;
}else{
tXF = 0;
}
if(this.sy <= this.ey){
tYF = 1;
}else{
tYF = 0;
}
if(this.xFlage == tXF && this.yFlage == tYF){
this.sx += Math.cos(this.angle) * this.len * 0.8;
this.sy += Math.sin(this.angle) * this.len * 0.8;
}else{
this.sx = sx;
this.sy = sy;
}
this.tx = this.sx;
this.ty = this.sy;
}
//画圈圈
this.circle = function(){
for(var i = 3; i < 15 ; i++ ){
context.beginPath();
context.arc(this.ex,this.ey,i, 0, Math.PI*2, true);
context.globalAlpha = (15 - i )/12;
context.strokeStyle = this.color;
context.stroke();
}
}
  }
  //两点之间的距离
  function calculateDistance( p1x, p1y, p2x, p2y ) {
var xDistance = p1x - p2x,
yDistance = p1y - p2y;
return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
//产生随机色
function ramColor() {
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}
</script>
</body>
</html>


如有不明,可以QQ1041247643)联系;如若转载或发表,请注明第一作者为袁洪军

版权声明:本文为博主原创文章,未经博主允许不得转载。

iOS---使用CAEmitterLayer制作发射粒子的特效

CAEmitterLayer是QuartzCore提供的粒子引擎, 可用于制作美观的粒子特效. 如下图是一个粒子特效的截图, 实际的动态效果会更好, 因为gif制作比较模糊就没有贴出来.CAEmit...
  • icetime17
  • icetime17
  • 2016年06月18日 09:40
  • 1906

IOS开发之粒子效果

粒子效果非常漂亮,在应用中可能用的不多,但是可以给用户眼前一亮的感受。 粒子效果主要用到两个类:CAEmitterLayer和CAEmitterCell. 步骤如下: 1.添加框架 ...
  • u011238639
  • u011238639
  • 2015年08月15日 12:11
  • 256

Unity粒子系统参数解析(二)(发射器)

Emission Module(发射模块): 发射模块控制粒子发射的速率,在粒子的持续时间内,可实现在某个特定的时间生成大量的粒子的效果。这对于在模拟爆炸效果需要产生一大堆粒子的时候非常有用。 {...
  • lishuzhai
  • lishuzhai
  • 2015年09月17日 08:16
  • 2680

Android制作粒子爆炸特效

简介最近在闲逛的时候,发现了一款粒子爆炸特效的控件,觉得比较有意思,效果也不错。 但是代码不好扩展,也就是说如果要提供不同的爆炸效果,需要修改的地方比较多。于是我对源代码进行了一些重构,将爆炸流程和...
  • kangaroo835127729
  • kangaroo835127729
  • 2015年12月02日 16:06
  • 28640

iOS-直播中粒子效果

转载注明出处: http://blog.csdn.net/qxuewei/article/details/53942647粒子效果的应用场景: 主播房间右下角粒子动画 雪花/下雨/烟花等效果 Q...
  • qiuxuewei2012
  • qiuxuewei2012
  • 2016年12月30日 17:43
  • 1531

ANDROID模拟火花粒子的滑动喷射效果

通过SurfaceView模拟火花粒子的滑动喷射效果
  • a396901990
  • a396901990
  • 2015年03月04日 01:36
  • 7181

IOS 使用 CAEmitterLayer实现粒子效果

在iOS 5中,苹果引入了一个新的CALayer子类叫做CAEmitterLayer。CAEmitterLayer是一个高性能的粒子引擎,被用来创建实时例子动画如:烟雾,火,雨等等这些效果。 CAE...
  • u011646339
  • u011646339
  • 2016年07月08日 11:42
  • 2025

iOS CAEmitterLayer 和 CAEmitterCell 粒子发射

CAEmitterLayer emitterCells:CAEmitterCell对象的数组,被用于把粒子投放到layer上 birthRate:可以通俗的理解为发射源的个数,默认1.0。...
  • XLawsZero
  • XLawsZero
  • 2016年07月29日 15:33
  • 498

HTML5+JS游戏开发模块----发射多颗子弹

现在开始射击游戏中发射子弹模块,说实话,这是我上网查找资源自学后,自己捣鼓的。由于兴趣支撑,由于缺乏正规教程,而我又没有钱培训,基础不好也不敢冒险培训。所以,代码很初级,更多是为了实现某种目的,按键处...
  • wujimiao
  • wujimiao
  • 2016年09月25日 13:29
  • 1731

Unity3d学习笔记(三)Legacy粒子系统提前和延迟发射

Unity的Legacy粒子系统里面有些参数可能会让人迷惑,如果不是有心人专门指点,你根本不知道为啥你调的那个参数没有任何作用……比如Stretched Particles,大家都知道这个字面意思代表...
  • cyansh
  • cyansh
  • 2014年01月21日 18:00
  • 877
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5粒子发射效果
举报原因:
原因补充:

(最多只允许输入30个字)