【教程】HTML5+JavaScript編寫轉動的水彩五環

作者： 風小銳 新浪微博ID：永遠de風小銳 QQ：547953539 轉載請註明出處

今天瀏覽CSDN博客，發現了whqet編寫的《CreateJS奧運五環動畫》，發現效果十分炫酷，原文使用了CreateJS庫，對於不熟悉這個庫的我來說，要讀懂其中的代碼着實有些費勁。作爲一個剛接觸JavaScript的菜鳥來說，我開始嘗試使用純HTML5和JavaScript函數來實現這個效果，經過了幾個小時的編寫，終於實現了所要的效果，在這裏把代碼分享給大家，希望能對大家有所幫助。

效果圖如下：

圖片是靜態的，沒法領略其中的神韻，感興趣的同學可以拷貝下面的代碼到瀏覽器中運行。

由於代碼中註釋的比較詳細，我不具體解釋，簡單地介紹一下其中需要注意的幾點：

1.環的對象放在全局變量數組中，粒子存儲在每個環的粒子數組中。

2.粒子到環圓心的距離要加上一個隨機的偏移量offset，這樣效果會更好。

3.粒子的大小在一個範圍內取隨機值，顏色在設定的幾種中取隨機值。

下面附上代碼，有問題歡迎在下面評論和我的新浪微博與我談論：

<html>
<head>
<title>My Olympic Logo</title>
<script type="text/javascript">
//====================================================
// Name: olympic_logo.html
//	Des: 不斷轉動的水彩五環
// 2014年 4月29日  Create by 風小銳 
//====================================================
//想要實現一個五環圖案，首先定義好五環的中心座標、半徑，在每個環中存有其中包含
//的所有粒子，使用循環依次畫出其中的每個粒子。
var particleNum = window.innerWidth / 15;
var offset=5;							//每個粒子到圓心的偏移量
var color = ["blue","black","red","yellow","green"];
var RADIUS = window.innerWidth / 10;	//圓的半徑
var canvas;
var ctx;
var circles=[];
var SPEED_MIN = RADIUS/2;
var SPEED_MAX = RADIUS;
var fps=24;								//動畫運行的幀數

//入口函數
function init(){
	canvas = document.getElementById('canvas');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	ctx = canvas.getContext('2d');
	initCircles();
	//drawAll();
	setInterval(drawAll,1000/fps);
}

//初始化所有環
function initCircles(){
	var circle;
    for(var i = 1;i <= 3;i++){
        circle = new Circle(i,1,RADIUS,color[i - 1]);
		initParticles(circle);
        circles.push(circle);       
    }    
    circle = new Circle(1,2,RADIUS,color[3]);  
	initParticles(circle);
    circles.push(circle);  
    
    circle = new Circle(2,2,RADIUS,color[4]); 
	initParticles(circle);
    circles.push(circle);  
}

//初始化一個環中的所有粒子
function initParticles(circle){
	var ptc;
	var i;
	for(i=0;i<particleNum;i++){
		ptc=new Particle(circle.centerX, circle.centerY, 2*Math.PI*i/particleNum, circle.radius, circle.color);
		circle.particles.push(ptc);
	}
}

//繪製所有的元素
function drawAll(){
	var i;
	ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
	for(i=0;i<5;i++)
		circles[i].draw();
}

//定義環，包含圓心位置半徑顏色信息
function Circle(cx,cy,r,_color){
    if(cy == 1){		//上面三個環
        this.centerX = r + 2 * r * (cx - 1) + ((window.innerWidth / 2) - 3 * r);
        this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r);
    }else{				//下面兩個環
        this.centerX = r + 2 * r * (cx - 1) + r + ((window.innerWidth / 2) - 3 * r);
        this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r);
    }
    
    this.radius = r;
    this.color = _color;
	this.particles=[];
	//依次畫出一個環中的所有粒子
	this.draw= function(){
		var i;
		for(i=0;i<particleNum;i++){
			this.particles[i].draw();
			this.particles[i].move();
		}
	}; 
}

//定義粒子，這裏輸入圓環的圓心和半徑、顏色
function Particle(cx,cy,_angle,_radius,_color){
    this.radius = getRandomNum(5,10);	//粒子的半徑
    this.color=setColor(_color);		//獲取一個顏色，16進制rgb           
    //旋轉中心座標
	this.rotateCenterX = cx;
    this.rotateCenterY = cy; 
    //角度
    this.angle = _angle;
    //角速度，隨機得到大小和方向
    if(getRandomNum(1,10) % 2 == 0){
        this.speed =  Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX));
    }else{
        this.speed =  - Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX));
    }
	//到旋轉中心的距離
	this.distance=_radius+getRandomNum(-offset,offset);
	//圓心的座標
	this.centerX =this.rotateCenterX+this.distance*Math.cos(this.angle);
	this.centerY =this.rotateCenterY-this.distance*Math.sin(this.angle);
	//繪製粒子
	this.draw =function(){
		ctx.fillStyle=this.color;
		ctx.beginPath();
		ctx.arc(this.centerX,this.centerY,this.radius,0,2*Math.PI,true);
		ctx.closePath();
		ctx.fill();
	};
	
	//移動該粒子
	this.move =function(){
		this.angle += this.speed;		//角度加上角速度
		//根據新的角度計算粒子座標
		this.centerX =this.rotateCenterX+this.distance*Math.cos(this.angle);
		this.centerY =this.rotateCenterY+this.distance*Math.sin(this.angle);
	};
}
	
 //   取得隨機數
function getRandomNum( min, max ) {
    return ( Math.random() * ( max - min ) + min ) | 0;
}

//根據選擇的顏色隨機選擇一個rgb值並返回
function setColor(_color){
	var fillStyle;
    switch(_color){
        case "blue":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillStyle="#0B5FA5";
                    break;
                case 1:
                    fillStyle="#25547B";
                    break;
                case 2:
                    fillStyle="#043C6B";
                    break;
                case 3:
                    fillStyle="#3F8FD2";
                    break;
                case 4:
                    fillStyle="#66A1D2";
                    break;
                default:
                    break;
            }
            break;
        case "black":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillStyle="#000";
                    break;
                case 1:
                    fillStyle="#111";
                    break;
                case 2:
                    fillStyle="#191919";
                    break;
                case 3:
                    fillStyle="#2a2a2a";
                    break;
                case 4:
                    fillStyle="#3b3b3b";
                    break;
                default:
                    break;
            }
            break;
        case "red":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillStyle="#FF0000";
                    break;
                case 1:
                    fillStyle="#BF3030";
                    break;
                case 2:
                    fillStyle="#A60000";
                    break;
                case 3:
                    fillStyle="#FF4040";
                    break;
                case 4:
                    fillStyle="#FF7373";
                    break;
                default:
                    break;
            }
            break; 
        case "yellow":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillStyle="#FFF500";
                    break;
                case 1:
                    fillStyle="#BFBA30";
                    break;
                case 2:
                    fillStyle="#A69F00";
                    break;
                case 3:
                    fillStyle="#FFF840";
                    break;
                case 4:
                    fillStyle="#FFFA73";
                    break;
                default:
                    break;
            }
            break; 
        case "green":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillStyle="#25D500";
                    break;
                case 1:
                    fillStyle="#3DA028";
                    break;
                case 2:
                    fillStyle="#188A00";
                    break;
                case 3:
                    fillStyle="#59EA3A";
                    break;
                case 4:
                    fillStyle="#80EA69";
                    break;
                default:
                    break;
            }
            break; 
        default:
            break;              
    }
	return fillStyle;
}

</script>
</head>

<body onLoad="init();">
<canvas id="canvas" >
Your browser doesn't support the HTML5 element canvas.
</canvas>
</body>
</html>

風小銳

發佈了16 篇原創文章 · 獲贊 100 · 訪問量 5萬+

私信關注

【教程】HTML5+JavaScript編寫轉動的水彩五環

【教程】HTML5+JavaScript編寫轉動的水彩五環

警惕Java，迎來JavaScript

《代碼大全》學習摘要（一）變量名的力量

信仰是如何毀掉程序員的

【教程】HTML5+JavaScript編寫flappy bird

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結