摘要：設(shè)置繪制字符串的垂直對(duì)齊方式，該屬性支持等屬性值。調(diào)用的方法關(guān)閉子路徑。與前一個(gè)方法相比，只是定義弧的方式不同。把的當(dāng)前路徑從當(dāng)前結(jié)束點(diǎn)連接到對(duì)應(yīng)的點(diǎn)。向添加一段二次曲線。

在HTML頁(yè)面上定義元素與定義其他普通元素并無(wú)任何不同，它除了可以指定id、style、class、hidden等通用屬性之外，還可以指定如下兩個(gè)屬性：

height：該屬性設(shè)置該畫布組件高度

width：該屬性設(shè)置該畫布組件寬度

在HTML網(wǎng)頁(yè)上定義元素，它只是一張“空白”的畫布。為了在元素上繪圖，必須經(jīng)過(guò)如下3步：

獲取元素對(duì)應(yīng)的DOM對(duì)象，這是一個(gè)Canvas對(duì)象

調(diào)用Canvas對(duì)象的getContent()方法，該方法返回一個(gè)CanvasRenderingContext2D對(duì)象，該對(duì)象即可繪制圖形。

調(diào)用CanvasRendingContext2D對(duì)象的方法繪圖。

    
    


    
畫圖入門
    
    

    
    
    
繪制圖形
    
    

CanvasRenderingContext2D為繪制文字提供了如下兩個(gè)方法：

fillText(String text,float x,float y,[float maxWidth])：填充字符串

stroke(String text,float x,float y,[float maxWidth]):繪制字符串邊框

為了設(shè)置繪制字符串時(shí)所用的字體、字體對(duì)齊方式，CanvasRenderingContext2D還提供了如下兩個(gè)屬性：

textAlign：該屬性支持start、end、left、right、center等屬性值。

textBaseAlign：設(shè)置繪制字符串的垂直對(duì)齊方式，該屬性支持top、hanging、middle、alphabetic、idecgraphic、bottom等屬性值。

    
    
    
繪制文字
    
    

CanvasRenderingContext2D為設(shè)置圖形陰影提供了如下屬性：

shadowBlur：設(shè)置陰影的模糊度。該屬性值是一個(gè)浮點(diǎn)數(shù)，該數(shù)值越大。陰影的模糊程度就越大。

shadowColor：設(shè)置陰影的顏色。

shadowOffsetX：設(shè)置陰影在X方向的偏移。

shadowOffsetY：設(shè)置陰影在Y方向的偏移。

    
    
    
啟用陰影
    
    

CanvasRenderingContext2D并沒有直接提供繪制圖形、橢圓等幾何圖形的方法。為了在Canvas上繪制更復(fù)雜的圖形，必須在Canvas上啟用路徑，借助于路徑來(lái)繪制圖形。

在Canvas上使用路徑，可按如下步驟進(jìn)行：

調(diào)用CanvasRenderingContext2D對(duì)象的beginPath()方法開始定義路徑。

調(diào)用CanvasRenderingContext2D各種方法添加子路徑。

調(diào)用CanvasRenderingContext2D的closePath()方法關(guān)閉子路徑。

調(diào)用CanvasRenderingContext2D的fill()或stroke()方法來(lái)填充路徑或繪制路徑邊框。

CanvasRenderingContext2D對(duì)象提供了如下方法來(lái)添加子路徑：

arc(float x,float y,float radius,float startAngle,endAngle,boolean counterclockwise)：向Canvas的當(dāng)前路徑上添加一段弧。繪制以x、y為圓心，radius為半徑，從startAngle角度開始，到endAngle角度結(jié)束的圓弧。startAngle、endAngle以弧度為單位。該方法的前兩個(gè)參數(shù)指定圓弧的圓心，第三個(gè)參數(shù)用于設(shè)置圓弧的半徑，第四、五個(gè)參數(shù)則用于設(shè)置圓弧的開始角度、結(jié)束角度，最后一個(gè)角度用于設(shè)置是否順時(shí)針旋轉(zhuǎn)。

arcTo(float x1,float y1,float x2,float y2,float radius)：向Canvas的當(dāng)前路徑上添加一段弧。與前一個(gè)方法相比，只是定義弧的方式不同。該方法也是繪制一段圓弧，確定這段圓弧的方式是：假設(shè)從當(dāng)前點(diǎn)到 P₁(x₁,y₁)繪制一條線條，再?gòu)?em>P₁(x₁,y₁)到P₂(x₂,y₂) 繪制一條線條，arcTo()則繪制一段同時(shí)與上面兩條線條相切，且半徑為radius的圓弧。

bezierCurveTo(float cpX1,float cpY1,float cpX2,float cpY2,float x,float y):向Canvas的當(dāng)前路徑上添加一段貝濟(jì)埃曲線。

lineTo(float x,float y):把Canvas的當(dāng)前路徑從當(dāng)前結(jié)束點(diǎn)連接到x、y對(duì)應(yīng)的點(diǎn)。

moveTo(float x,float y):把Canvas的當(dāng)前路徑的結(jié)束點(diǎn)移動(dòng)到x、y對(duì)應(yīng)的點(diǎn)。

quadraticCurveTo(float cpX,float cpY,float x,float y):向Canvas添加一段二次曲線。

rect(float x,float y,float width,float height):向Canvas的當(dāng)前路徑添加一個(gè)矩形。

    
    
    
繪制圓形
    
    

使用arcTo()方法繪制一個(gè)圓角矩形。

    
    
    
 arcTo 示意
    
    

其中moveTo(x,y)和`lineToo(x,y)，前者是把繪制點(diǎn)移動(dòng)到指定點(diǎn)，而后者則負(fù)責(zé)繪制從當(dāng)前點(diǎn)到指定點(diǎn)(x,y)的線條。

    
    
    
lineTo示例