書名： HTML5實驗室
作者名：張磊編著
本章字數： 7字
更新時間： 2019-01-09 15:53:49

上篇實驗

第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不嵌套的彩色五環

現在基本上已經和奧林匹克標志差不多了。可是細心的讀者會發現，后畫的圓形會覆蓋在先畫的圓形上面，這樣就失去了環環相扣的感覺，那么如何環環相扣呢？現在就要學習畫弧。

畫弧

可以通過畫弧來重新覆蓋應被覆蓋的部分，以實現環環相扣的視覺效果。

在畫弧之前，先回到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。

官术网_书友最值得收藏!

HTML5實驗室

上篇 實驗

第1章 基礎實驗

實驗1 奧運五環

上篇實驗

第1章基礎實驗