**一實現思路：** 實現原理主要是利用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); }; ~~~ 我為什么要在插圖上加上我的名字，因為發現文章被轉載的時候居然沒有被標出來！