最近一直在研究HTML5的粒子效果，參考了很多資料，也研究了很多大神的作品，可還是一知半解，覺得雲裡霧裡。不過，無意間我發現了一篇文章，叫《七步學做HTML5 Canvas粒子噴射動畫》，網址是：http://www.108js.com/article/article3/30277.html?id=1177
小編我參考這篇文章，并稍加修改，完成了自己想要的效果。下面就把源碼附上：
<!DOCTYPE HTML>
<html >
<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>
如有不明，可以QQ（1041247643）聯系；如若轉載或發表，請注明第一作者為袁洪軍
![寫在工作13周年[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)