body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
varcanvas = 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);
}
本文是在《HTML5粒子发射效果》上进行的改造,很多冗余代码没有去掉,如需使用,可以在进行改进
如有不明,可以QQ(1041247643)联系(或QQ群【248716722】和百度贴吧【IT爱好者联盟】);如若转载或发表,请注明第一作者为袁洪军