書(shū)名： HTML5實(shí)驗(yàn)室
作者名：張磊編著
本章字?jǐn)?shù)： 4字
更新時(shí)間： 2019-01-09 15:53:48

上篇實(shí)驗(yàn)

第1章基礎(chǔ)實(shí)驗(yàn)

實(shí)驗(yàn)1 奧運(yùn)五環(huán)

簡(jiǎn)介

奧林匹克五環(huán)標(biāo)志是由皮埃爾·德·顧拜旦先生于1913年構(gòu)思設(shè)計(jì)的，是由《奧林匹克憲章》確定的，也被稱為奧運(yùn)五環(huán)標(biāo)志，它是世界范圍內(nèi)最為人們廣泛認(rèn)知的奧林匹克運(yùn)動(dòng)會(huì)標(biāo)志。它由5個(gè)奧林匹克環(huán)套接組成，有藍(lán)、黃、黑、綠、紅5種顏色。環(huán)從左到右互相套接，上面是藍(lán)、黑、紅環(huán)，下面是黃、綠環(huán)。整個(gè)造形為一個(gè)上方大底部小的規(guī)則梯形。五個(gè)不同顏色的圓環(huán)代表了參加現(xiàn)代奧林匹克運(yùn)動(dòng)會(huì)的五大洲——?dú)W洲、亞洲、非洲、澳洲和美洲，如圖1-1所示。

圖1-1 奧林匹克五環(huán)

如何在Canvas上繪制出一個(gè)一模一樣的奧林匹克五環(huán)呢？首先從畫(huà)圓開(kāi)始。

畫(huà)圓

在一切實(shí)驗(yàn)之前，要先理解Canvas中的坐標(biāo)系統(tǒng)，假設(shè)一個(gè)寬是300高是150的Canvas標(biāo)簽，它內(nèi)部的坐標(biāo)變化如圖1-2所示。

圖1-2 Canvas坐標(biāo)

理解了坐標(biāo)，開(kāi)始畫(huà)圓。CanvasRenderingContext2D對(duì)象提供了一組用來(lái)在畫(huà)布上繪制的圖形函數(shù)。使用CanvasRenderingContext2D.arc來(lái)繪制一個(gè)圓形。

語(yǔ)法：

        arc(x, y, radius, startAngle, endAngle, counterclockwise)

利用該方法，直接在Canvas中畫(huà)5個(gè)圓環(huán)。

        <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 簡(jiǎn)單的黑白五環(huán)

可以看到和標(biāo)準(zhǔn)的奧林匹克標(biāo)志相比，圓環(huán)寬度不夠，而且不是彩色的，所以要設(shè)置CanvasRenderingContext2D的屬性來(lái)繪制更加逼真的圓環(huán)。

        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不嵌套的彩色五環(huán)

現(xiàn)在基本上已經(jīng)和奧林匹克標(biāo)志差不多了?？墒羌?xì)心的讀者會(huì)發(fā)現(xiàn)，后畫(huà)的圓形會(huì)覆蓋在先畫(huà)的圓形上面，這樣就失去了環(huán)環(huán)相扣的感覺(jué)，那么如何環(huán)環(huán)相扣呢？現(xiàn)在就要學(xué)習(xí)畫(huà)弧。

畫(huà)弧

可以通過(guò)畫(huà)弧來(lái)重新覆蓋應(yīng)被覆蓋的部分，以實(shí)現(xiàn)環(huán)環(huán)相扣的視覺(jué)效果。

在畫(huà)弧之前，先回到CanvasRenderingContext2D的arc方法。

        arc(x, y, radius, startAngle, endAngle, counterclockwise)

以上代碼中各參數(shù)的意義如表1-1所示。

表1-1 各參數(shù)的意義

如圖1-5所示，更加形象化地表示了每個(gè)參數(shù)的意義。

圖1-5 弧的各項(xiàng)參數(shù)

那么，需要怎樣的一張圖像蓋在上面才能實(shí)現(xiàn)環(huán)環(huán)相扣的效果呢？如圖1-6所示。

圖1-6畫(huà)弧

通過(guò)下面的代碼實(shí)現(xiàn)上面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();

把上面畫(huà)圓的代碼和畫(huà)弧的代碼合起來(lái)，順序是先畫(huà)圓，后畫(huà)弧，弧就會(huì)蓋在圓的上面。完整的代碼如下：

        <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;    \注：設(shè)置圓環(huán)的寬度\
              ctx.strokeStyle="#163B62";    \注：設(shè)置圓環(huán)的顏色\
              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";    \注：從這里開(kāi)始，下面是畫(huà)弧\
              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>

運(yùn)行效果如圖1-7所示。

圖1-7 奧林匹克五環(huán)

就這樣，實(shí)現(xiàn)了奧林匹克五環(huán)的環(huán)環(huán)相扣。其實(shí)CanvasRenderingContext2D不僅可以畫(huà)空心圓，也可以畫(huà)實(shí)心圓，下一個(gè)實(shí)驗(yàn)就會(huì)用到它相關(guān)的API。

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

HTML5實(shí)驗(yàn)室

上篇 實(shí)驗(yàn)

第1章 基礎(chǔ)實(shí)驗(yàn)

實(shí)驗(yàn)1 奧運(yùn)五環(huán)

上篇實(shí)驗(yàn)

第1章基礎(chǔ)實(shí)驗(yàn)