4.2　繪制圖形

本節將介紹一些基本圖形的繪制，包括矩形、直線、圓形、曲線等形狀或路徑。

4.2.1　矩形

視頻講解

canvas僅支持一種原生的圖形繪制：矩形。繪制其他圖形都至少需要生成一條路徑。不過，擁有眾多路徑生成的方法，繪制復雜圖形也很輕松。

canvas提供了三種方法繪制矩形：

　fillRect(x, y, width, height)：繪制一個填充的矩形。

　strokeRect(x, y, width, height)：繪制一個矩形的邊框。

　clearRect(x, y, width, height)：清除指定矩形區域，讓清除部分完全透明。

參數說明如下：

　x：矩形左上角的x坐標。

　y：矩形左上角的y坐標。

　width：矩形的寬度，以像素為單位。

　height：矩形的高度，以像素為單位。

【示例】下面示例分別使用上述3種方法繪制了3個嵌套的矩形，預覽效果如圖4.4所示。

圖4.4　繪制矩形

在上面代碼中，fillRect()方法繪制了一個邊長為100px的黑色正方形。clearRect()方法從正方形的中心開始擦除了一個60px×60px的正方形，接著strokeRect()在清除區域內生成一個50px×50px的正方形邊框。

4.2.2　路徑

視頻講解

圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。一個路徑，甚至一個子路徑，都是閉合的。使用路徑繪制圖形的步驟如下：

第1步，創建路徑起始點。

第2步，使用畫圖命令繪制路徑。

第3步，把路徑封閉。

第4步，生成路徑之后，可以通過描邊或填充路徑區域來渲染圖形。

需要調用的方法說明如下：

　beginPath()：開始路徑。新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。

　closePath()：閉合路徑。閉合路徑之后圖形繪制命令又重新指向到上下文中。

　stroke()：描邊路徑。通過線條來繪制圖形輪廓。

　fill()：填充路徑。通過填充路徑的內容區域生成實心的圖形。

【示例1】下面示例繪制一個三角形，效果如圖4.5所示。代碼僅提供繪圖函數draw()，完整代碼可以參考4.2.1節示例，后面各節示例類似。

使用moveTo(x, y)方法可以將筆觸移動到指定的坐標x和y上。當初始化canvas，或者調用beginPath()方法后，通常會使用moveTo()方法重新設置起點。

【示例2】用戶可以使用moveTo()方法繪制一些不連續的路徑。下面示例繪制一個笑臉圖形，效果如圖4.6所示。

圖4.5　繪制三角形

圖4.6　繪制笑臉

上面代碼中使用到arc()方法，調用它可以繪制圓形，在后面小節中將詳細說明。

4.2.3　直線

視頻講解

使用lineTo()方法可以繪制直線，用法如下所示：

    lineTo(x,y)

參數x和y分別表示終點位置的x坐標和y坐標。lineTo(x, y)將繪制一條從當前位置到指定(x, y)位置的直線。

【示例】下面示例將繪制兩個三角形，一個是填充的，另一個是描邊的，效果如圖4.7所示。

在上面示例代碼中，從調用beginPath()方法準備繪制一個新的形狀路徑開始，使用moveTo()方法移動到目標位，兩條線段繪制后構成三角形的兩條邊。當路徑使用填充（filled）時，路徑自動閉合；而使用描邊（stroked）則不會閉合路徑。如果沒有添加閉合路徑closePath()到描邊三角形中，則只繪制了兩條線段，并不是一個完整的三角形。

圖4.7　繪制三角形

4.2.4　圓弧

視頻講解

使用arc()方法可以繪制弧或者圓，用法如下所示：

    context.arc(x, y, r, sAngle, eAngle, counterclockwise);

參數說明如下：

　x：圓心的x坐標。

　y：圓心的y坐標。

　r：圓的半徑。

　sAngle：起始角，以弧度計。（提示：弧的圓形的三點鐘位置是0°。）

　eAngle：結束角，以弧度計。

　counterclockwise：可選參數，定義繪圖方向。false為順時針，為默認值，true為逆時針。

如果使用arc()創建圓，可以把起始角設置為0，結束角設置為2*Math.PI。

【示例1】下面示例繪制了12個不同的角度以及填充的圓弧。主要使用兩個for循環，生成圓弧的行列（x,y）坐標。每一段圓弧的開始都調用beginPath()方法。代碼中，每個圓弧的參數都是可變的，（x,y）坐標是可變的，半徑（radius）和開始角度（startAngle）都是固定的。結束角度（endAngle）在第一列開始時是180°（半圓），然后每列增加90°。最后一列形成一個完整的圓。效果如圖4.8所示。

在上面代碼中，“var anticlockwise= i%2==0 ? false : true;”語句作用于第一、三行是順時針的圓弧，anticlockwise作用于二、四行為逆時針圓弧。if語句讓一、二行描邊圓弧，下面兩行填充路徑。

使用arcTo()方法可以繪制曲線，該方法是lineTo()的曲線版，它能夠創建兩條切線之間的弧或曲線。用法如下所示：

    context.arcTo(x1,y1,x2,y2,r);

參數說明如下：

　x1：弧的起點的x坐標。

　y1：弧的起點的y坐標。

　x2：弧的終點的x坐標。

　y2：弧的終點的y坐標。

　r：弧的半徑。

【示例2】本例使用lineTo()和arcTo()方法繪制直線和曲線，然后連成圓角弧線，效果如圖4.9所示。

圖4.8　繪制圓和弧

圖4.9　繪制圓角弧線

4.2.5　二次方曲線

視頻講解

使用quadraticCurveTo()方法可以繪制二次方貝塞爾曲線，用法如下。

    context.quadraticCurveTo(cpx,cpy,x,y);

參數說明如下：

　cpx：貝塞爾控制點的x坐標。

　cpy：貝塞爾控制點的y坐標。

　x：結束點的x坐標。

　y：結束點的y坐標。

二次方貝塞爾曲線需要兩個點。第一個點是用于二次貝塞爾計算中的控制點，第二個點是曲線的結束點。曲線的開始點是當前路徑中最后一個點。如果路徑不存在，需要使用beginPath()和moveTo()方法來定義開始點，演示說明如圖4.10所示。

圖4.10　二次方貝塞爾曲線演示示意圖

操作步驟如下：

第1步，確定開始點，如moveTo(20,20)。

第2步，定義控制點，如quadraticCurveTo(20,100,x,y)。

第3步，定義結束點，如quadraticCurveTo(20,100,200,20)。

【示例1】下面示例先繪制一條二次方貝塞爾曲線，再繪制出其控制點和控制線。

在瀏覽器中的運行效果如圖4.11所示，其中曲線即為二次方貝塞爾曲線，兩條直線為控制線，兩直線的交點即為曲線的控制點。

圖4.11　二次方貝塞爾曲線及其控制點

【示例2】下面示例組合直線和二次方曲線，封裝了一個圓角矩形函數，使用它可以繪制圓角矩形圖形，效果如圖4.12所示。

圖4.12　繪制圓角矩形

具體代碼解析請掃碼學習。

線上閱讀

4.2.6　三次方曲線

視頻講解

使用bezierCurveTo()方法可以繪制三次方貝塞爾曲線，用法如下。

    context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

參數說明如下：

　cp1x：第一個貝塞爾控制點的x坐標。

　cp1y：第一個貝塞爾控制點的y坐標。

　cp2x：第二個貝塞爾控制點的x坐標。

　cp2y：第二個貝塞爾控制點的y坐標。

　x：結束點的x坐標。

　y：結束點的y坐標。

三次方貝塞爾曲線需要三個點，前兩個點是用于三次貝塞爾計算中的控制點，第三個點是曲線的結束點。曲線的開始點是當前路徑中最后一個點，如果路徑不存在，需要使用beginPath()和moveTo()方法來定義開始點，演示說明如圖4.13所示。

操作步驟如下：

第1步，確定開始點，如moveTo(20,20)。

第2步，定義第一個控制點，如bezierCurveTo(20, 100, cp2x, cp2y, x, y)。

第3步，定義第二個控制點，如bezierCurveTo(20,100,200,100,x,y)。

第4步，定義結束點，如bezierCurveTo(20,100,200,100,200,20)。

【示例】下面示例繪制了一條三次方貝塞爾曲線，還繪制出了兩個控制點和兩條控制線。

在瀏覽器中的預覽效果如圖4.14所示，其中曲線即為三次方貝塞爾曲線，兩條直線為控制線，兩直線上方的端點即為曲線的控制點。

圖4.13　三次方貝塞爾曲線演示示意圖

圖4.14　三次方貝塞爾曲線