使用html5 canvas繪製圓形或弧線

時間 2019-12-20

標籤使用 html5 html canvas 繪製圓形弧線欄目 HTML5 简体版

原文原文鏈接

注意：本文屬於《html5 Canvas繪製圖形入門詳解》系列文章中的一部分。若是你是html5初學者，僅僅閱讀本文，可能沒法較深刻的理解canvas，甚至沒法順暢地通讀本文。請點擊上述連接以瞭解使用html5 canvas繪製圖形的完整內容。javascript

在html5中，CanvasRenderingContext2D對象也提供了專門用於繪製圓形或弧線的方法，請參考如下屬性和方法介紹：php

 arc(x, y, radius, startRad, endRad, anticlockwise)

: 在canvas畫布上繪製以座標點 (x,y)爲圓心、半徑爲 radius的圓上的一段弧線。這段弧線的起始弧度是 startRad，結束弧度是 endRad。這裏的弧度是以x軸正方向(時鐘三點鐘)爲基準、進行順時針旋轉的角度來計算的。 anticlockwise表示是以逆時針方向仍是順時針方向開始繪製，若是爲 true則表示逆時針，若是爲 false則表示順時針。 anticlockwise參數是可選的，默認爲 false，即順時針。
arc()方法中的弧度計算方式html

 arcTo(x1, y1, x2, y2, radius)

: 這個方法將利用當前端點、端點1 (x1,y1)和端點2 (x2,y2)這三個點所造成的夾角，而後繪製一段與夾角的兩邊相切而且半徑爲 radius的圓上的弧線。通常狀況下，繪製弧線的開始位置是當前端點，結束位置是端點2，而且弧線繪製的方向就是鏈接這兩個端點的最短圓弧的方向。此外，若是當前端點不在所指定的圓上，本方法還將繪製一條從當前端點到弧線起點的直線。
因爲詳細介紹arcTo()方法的篇幅較多，請移步至這裏查看arcTo()的詳細用法。前端

在瞭解了canvas繪製弧線的上述API以後，咱們就一塊兒來看看如何使用arc()繪製弧線。咱們已經知道，arc()接收的第4個和第5個參數表示繪製弧線的開始弧度和結束弧度。相信各位讀者在學校的數學或幾何課程上都學過弧度，弧度是一種角度單位。弧長等於半徑的弧，其所對的圓心角就是1弧度。咱們還知道，半徑爲r的圓，其周長爲2πr。在具有這些幾何知識的前提下，咱們就可使用arc()方法繪製弧線了。html5

使用canvas繪製弧線

如今，咱們就來繪製一條半徑爲50px的圓的1/4弧線。java

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>HTML5 Canvas繪製弧線入門示例</title>
 6 </head>
 7 <body>
 8  
 9 <!-- 添加canvas標籤，並加上紅色邊框以便於在頁面上查看 -->
10 <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
11 您的瀏覽器不支持canvas標籤。
12 </canvas>
13  
14 <script type="text/javascript">
15 //獲取Canvas對象(畫布)
16 var canvas = document.getElementById("myCanvas");
17 //簡單地檢測當前瀏覽器是否支持Canvas對象，以避免在一些不支持html5的瀏覽器中提示語法錯誤
18 if(canvas.getContext){  
19     //獲取對應的CanvasRenderingContext2D對象(畫筆)
20     var ctx = canvas.getContext("2d");  
21     
22     //開始一個新的繪製路徑
23     ctx.beginPath();
24     //設置弧線的顏色爲藍色
25     ctx.strokeStyle = "blue";
26     var circle = {
27         x : 100,    //圓心的x軸座標值
28         y : 100,    //圓心的y軸座標值
29         r : 50      //圓的半徑
30     };
31     //沿着座標點(100,100)爲圓心、半徑爲50px的圓的順時針方向繪製弧線
32     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, false);    
33     //按照指定的路徑繪製弧線
34     ctx.stroke();
35 }
36 </script>
37 </body>
38 </html>

對應的顯示效果以下圖：運行代碼canvas

使用canvas沿着順時針方向繪製弧線瀏覽器

如上所示，咱們設置了繪製的弧線的所在圓的圓心座標爲(100,100)，半徑爲50px。因爲一個半徑爲r的圓的周長爲2πr，也就是說，一個完整的圓，其所對應的弧度爲2π(換算成常規角度就是360°)，因此咱們想要畫一個圓的1/4弧線，只要弧度爲π/2(即90°)就能夠了。在上面的代碼中，咱們使用了JavaScript中表示π的常量Math.PI。spa

此外，在上面的代碼中，咱們還設置了繪製弧線的方向爲順時針方向(false)。因爲起始弧度爲0，結束弧度爲π/2，所以弧線將從x軸的正方向開始沿着順時針方向繪製，從而獲得上面的圖形。若是咱們將上述代碼中的弧線繪製方向改成逆時針，會有什麼樣的效果呢？code

 1 <script type="text/javascript">
 2 //獲取Canvas對象(畫布)
 3 var canvas = document.getElementById("myCanvas");
 4 //簡單地檢測當前瀏覽器是否支持Canvas對象，以避免在一些不支持html5的瀏覽器中提示語法錯誤
 5 if(canvas.getContext){  
 6     //獲取對應的CanvasRenderingContext2D對象(畫筆)
 7     var ctx = canvas.getContext("2d");  
 8     
 9     //開始一個新的繪製路徑
10     ctx.beginPath();
11     //設置弧線的顏色爲藍色
12     ctx.strokeStyle = "blue";
13     var circle = {
14         x : 100,    //圓心的x軸座標值
15         y : 100,    //圓心的y軸座標值
16         r : 50      //圓的半徑
17     };
18     //沿着座標點(100,100)爲圓心、半徑爲50px的圓的逆時針方向繪製弧線
19     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, true);    
20     //按照指定的路徑繪製弧線
21     ctx.stroke();
22 }
23 </script>

對應的顯示效果以下：運行代碼

使用canvas沿着逆時針方向繪製弧線

使用canvas繪製圓形

當咱們學會了繪製弧線以後，觸類旁通，咱們想要繪製圓形天然也不在話下，只須要將上述代碼的結束弧度改成2π便可。

 1 <script type="text/javascript">
 2 //獲取Canvas對象(畫布)
 3 var canvas = document.getElementById("myCanvas");
 4 //簡單地檢測當前瀏覽器是否支持Canvas對象，以避免在一些不支持html5的瀏覽器中提示語法錯誤
 5 if(canvas.getContext){  
 6     //獲取對應的CanvasRenderingContext2D對象(畫筆)
 7     var ctx = canvas.getContext("2d");  
 8     
 9     //開始一個新的繪製路徑
10     ctx.beginPath();
11     //設置弧線的顏色爲藍色
12     ctx.strokeStyle = "blue";
13     var circle = {
14         x : 100,    //圓心的x軸座標值
15         y : 100,    //圓心的y軸座標值
16         r : 50      //圓的半徑
17     };
18     //以canvas中的座標點(100,100)爲圓心，繪製一個半徑爲50px的圓形
19     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);    
20     //按照指定的路徑繪製弧線
21     ctx.stroke();
22 }
23 </script>

對應的顯示效果以下：運行代碼

使用canvas繪製的圓形

備註：arc()方法中的起始弧度參數startRad和結束弧度參數endRad都是以弧度爲單位，即便你填入一個數字，例如360，仍然會被看做是360弧度。將上述代碼的結束弧度設爲360會產生什麼用的後果呢？這就要看繪製的方向了(即anticlockwise參數的值)，若是是順時針繪製(false)，則將繪製出一個完整的圓形；若是是逆時針繪製，大於2π的弧度將被轉換爲一個弧度相等、但不大於2π的弧度。例如，將上述代碼中的結束弧度設爲3π(Math.PI * 3)，若是anticlockwise爲false，將會顯示爲一個完整的圓形，若是爲true，則其顯示效果與設爲π時的顯示效果一致。

結束弧度設爲3π時，順時針(false)旋轉的繪製效果

結束弧度設爲3π時，逆時針(true)旋轉的繪製效果