上篇 實驗
第1章 基礎實驗
實驗1 奧運五環
簡介
奧林匹克五環標志是由皮埃爾·德·顧拜旦先生于1913年構思設計的，是由《奧林匹克憲章》確定的，也被稱為奧運五環標志，它是世界范圍內最為人們廣泛認知的奧林匹克運動會標志。它由5個奧林匹克環套接組成，有藍、黃、黑、綠、紅5種顏色。環從左到右互相套接，上面是藍、黑、紅環，下面是黃、綠環。整個造形為一個上方大底部小的規則梯形。五個不同顏色的圓環代表了參加現代奧林匹克運動會的五大洲——歐洲、亞洲、非洲、澳洲和美洲，如圖1-1所示。
圖1-1 奧林匹克五環
如何在Canvas上繪制出一個一模一樣的奧林匹克五環呢？首先從畫圓開始。
畫圓
在一切實驗之前，要先理解Canvas中的坐標系統，假設一個寬是300高是150的Canvas標簽，它內部的坐標變化如圖1-2所示。
圖1-2 Canvas坐標
理解了坐標，開始畫圓。CanvasRenderingContext2D對象提供了一組用來在畫布上繪制的圖形函數。使用CanvasRenderingContext2D.arc來繪制一個圓形。
語法：
arc(x, y, radius, startAngle, endAngle, counterclockwise)
利用該方法，直接在Canvas中畫5個圓環。
<canvasid="myCanvas"width="400"height="200"style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<scripttype="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(70, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(160, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(250, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(110, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
</script>
效果如圖1-3所示。
圖1-3 簡單的黑白五環
可以看到和標準的奧林匹克標志相比，圓環寬度不夠，而且不是彩色的，所以要設置CanvasRenderingContext2D的屬性來繪制更加逼真的圓環。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=5;
ctx.strokeStyle="#163B62";
ctx.beginPath();
ctx.arc(70, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#EBC41F";
ctx.beginPath();
ctx.arc(110, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#198E4A";
ctx.beginPath();
ctx.arc(200, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
效果如圖1-4所示。
圖1-4不嵌套的彩色五環
現在基本上已經和奧林匹克標志差不多了?？墒羌毿牡淖x者會發現，后畫的圓形會覆蓋在先畫的圓形上面，這樣就失去了環環相扣的感覺，那么如何環環相扣呢？現在就要學習畫弧。
畫弧
可以通過畫弧來重新覆蓋應被覆蓋的部分，以實現環環相扣的視覺效果。
在畫弧之前，先回到CanvasRenderingContext2D的arc方法。
arc(x, y, radius, startAngle, endAngle, counterclockwise)
以上代碼中各參數的意義如表1-1所示。
表1-1 各參數的意義
如圖1-5所示，更加形象化地表示了每個參數的意義。
圖1-5 弧的各項參數
那么，需要怎樣的一張圖像蓋在上面才能實現環環相扣的效果呢？如圖1-6所示。
圖1-6畫弧
通過下面的代碼實現上面3段弧形：
ctx.strokeStyle="#163B62";
ctx.beginPath();
ctx.arc(70, 70, 40, Math.PI * 1.9, Math.PI * 2.1, false);
ctx.stroke();
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, Math.PI * 0.9, Math.PI * 2.1, false);
ctx.stroke();
ctx.strokeStyle="#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, Math.PI * 0.9, Math.PI * 1.1, false);
ctx.stroke();
把上面畫圓的代碼和畫弧的代碼合起來，順序是先畫圓，后畫弧，弧就會蓋在圓的上面。完整的代碼如下：
<canvasid="myCanvas"width="400"height="200"style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<scripttype="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=5; \注：設置圓環的寬度\
ctx.strokeStyle="#163B62"; \注：設置圓環的顏色\
ctx.beginPath();
ctx.arc(70, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#EBC41F";
ctx.beginPath();
ctx.arc(110, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#198E4A";
ctx.beginPath();
ctx.arc(200, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#163B62"; \注：從這里開始，下面是畫弧\
ctx.beginPath();
ctx.arc(70, 70, 40, Math.PI * 1.9, Math.PI * 2.1, false);
ctx.stroke();
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, Math.PI * 0.9, Math.PI * 2.1, false);
ctx.stroke();
ctx.strokeStyle="#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, Math.PI * 0.9, Math.PI * 1.1, false);
ctx.stroke();
</script>
運行效果如圖1-7所示。
圖1-7 奧林匹克五環
就這樣，實現了奧林匹克五環的環環相扣。其實CanvasRenderingContext2D不僅可以畫空心圓，也可以畫實心圓，下一個實驗就會用到它相關的API。