HTML5 Canvas組件繪製太極圖案的圖文程式碼詳情

一實作想法：

實作原理主要利用HTML5的Canvas元件提供的path函式功能來繪製圓，先繪

制兩個半圓，分別為黑色和白色，組成一個圓，繪製完成以後再分別繪製一個黑色

和白色的圓在繪製好的黑白圓之內，半徑恰好是黑白大圓一半。 最後在繪製好的兩個

個黑白小圓內分別填滿白色和黑色的點，半徑大小約10pixel。

二程式效果如下：

#三關鍵程式解析：

#繪製半圓的程序，其中200，200表示開始繪製圓心點座標，第三個參數150表示繪製圓的半徑

第四個參數表示開始角度，第五個參數表示結束角度，最後一個參數表示是否為順時針或逆時針

繪製白色半圓的程式碼如下：

		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill();

繪製黑色半圓的程式碼如下：

		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();

在太極圖案中加入文字的程式碼使用了透明處理，Canvas全局透明度設定函數

如下：

		// set transparency value  
		ctx.globalAlpha = 0.2;

繪製文字的程式碼如下：

		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250);

程式完全JavaScript程式碼如下：

	window.onload = function() {
		var cvs = document.getElementById("canvas-path");
		ctx = cvs.getContext("2d");

		// Create circle, radius = 150
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();
		
		// draw sub circle
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 275, 75, 0, Math.PI*2, false); 
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 125, 75, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// fill black and white point
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 275, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 125, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// set transparency value  
		ctx.globalAlpha = 0.2;  
		  
		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250);
		ctx.globalAlpha = 1.0; 
		ctx.shadowOffsetX = 2;  
		ctx.shadowOffsetY = 2;  
		ctx.shadowBlur = 2;  
		ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  
		ctx.fillStyle = "#000";
		ctx.font = "20px Times New Roman";
		ctx.fillText("-created by gloomyfish", 100, 30);
	};

我為什麼要在插圖上加上我的名字，因為發現文章被轉載的時候居然沒有被標示出來！

以上就是HTML5 Canvas組件繪製太極圖案的圖文代碼詳情的內容，更多相關內容請關注PHP中文網（www.php.cn）！

#