会转弯的HTML5发射效果（路径问题）

最新推荐文章于 2024-04-05 02:13:15 发布

不悔将来

最新推荐文章于 2024-04-05 02:13:15 发布

阅读量607

点赞数

分类专栏：工作文章标签： canvas html5 发射动画路径

本文链接：https://blog.csdn.net/junjun56/article/details/45741219

版权

工作专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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 hue = 120;
  var mylines = [];
  var mylines2 = [];
  //圈圈
  
  var cycles = [];
  var arry1 = [[1357.3581337957253,389.95216244936756],[1335.1900222318359,439.901328672196],[1555.1900222318359,805.901328672196]];
 
 
 var myline = new MyLine(arry1,2,30,"#FFFFFF");
 //var mycycle = new MyCycle(1335.1900222318359,439.901328672196,3);
 mylines.push(myline);
 //cycles.push(mycycle);
 //alert(arry[0][0]);
  init();
 
  function init() {
    document.body.appendChild(canvas); 
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
setInterval(loop, 250);
  }
 
  function loop(){
  hue += 0.5;
context.clearRect(0,0,canvas.width,canvas.height);
for(var mI = 0 ; mI < mylines.length ; mI++){
var myline = mylines[mI];
myline.draw();
myline.update();

}
for(var mI = 0 ; mI < mylines2.length ; mI++){
var myline = mylines2[mI];
myline.draw();
myline.update();

}
for(var my = 0 ; my < cycles.length ; my++){
var mycycle = cycles[my];
mycycle.draw();
mycycle.update(my);

}
  }
  
  //画一个拖尾巴的线
  //该线存在起点和终点，长度，半径大小，颜色
  function MyLine(arr,rad,len,color){
  //this.arr = arr;
  this.arrlen = arr.length;
  this.startIndex = 1;
  if(this.arrlen >= 2){
	sx = arr[0][0];
	sy = arr[0][1];
	ex = arr[1][0];
	ey = arr[1][1];
	this.sx = arr[0][0];
	this.sy = arr[0][1];
	this.ex = arr[1][0];
	this.ey = arr[1][1];
	this.tx = this.sx;
	this.ty = this.sy;
  }

this.rad = rad;
this.len = len;
this.color = color;

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( ey - sy, ex - sx );
	this.brightness = 50 + Math.random()*20;
//开始画
this.draw = function(){
context.beginPath();
context.fillStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
//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{
//createCycle(this.ex,this.ey,this.color);

if((this.arrlen > 2) && ((this.startIndex+1) < this.arrlen)){
	this.startIndex ++;	
	sx = arr[this.startIndex - 1][0];
	sy = arr[this.startIndex - 1][1];
	ex = arr[this.startIndex][0];
	ey = arr[this.startIndex][1];
	this.sx = sx;
	this.sy = sy;
	this.ex = ex;
	this.ey = ey;
	
}else{
	
	sx = arr[0][0];
	sy = arr[0][1];
	ex = arr[1][0];
	ey = arr[1][1];
	this.sx = arr[0][0];
	this.sy = arr[0][1];
	this.ex = arr[1][0];
	this.ey = arr[1][1];
	this.tx = this.sx;
	this.ty = this.sy;
	this.startIndex = 1;
}
this.angle = Math.atan2( ey - sy, ex - sx );
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.tx = this.sx;
this.ty = this.sy;
}

  }
  
  function createLine(sx,sy,ex,ey,rad,len,color){
	myline2.push(new MyLine(sx,sy,ex,ey,rad,len,color));
  }
  //画圈圈
  
  function MyCycle(x,y,rad,color){
  
	this.sx = x;
	this.sy = y;
	this.rad = rad;
	this.color = color;
	
	this.draw = function(){
		context.beginPath();
		context.arc(this.sx,this.sy,this.rad, 0, Math.PI*2, true);
		context.globalAlpha = (15 - this.rad )/12;
		context.strokeStyle = this.color;
		context.stroke();
	}
	this.update = function(index){
		if(this.rad >= 15){
			cycles.splice(index,1);
		}else{
			this.rad ++;
			this.draw();
		}
	}
  
  }
  function createCycle(x,y,color){
	cycles.push(new MyCycle(x,y,3,color));
  }

  //两点之间的距离
  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>

本文是在《HTML5粒子发射效果》上进行的改造，很多冗余代码没有去掉，如需使用，可以在进行改进

如有不明，可以QQ（1041247643）联系（或QQ群【248716722】和百度贴吧【IT爱好者联盟】）；如若转载或发表，请注明第一作者为袁洪军