canvas arcTo 用法詳解

今天，我們接著介紹canvasrenderingcontext2d物件的方法arcto()的用法。

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

上述字面解釋可能不易理解，我們最好結合實際的**示例來幫助理解，請先參考下面的**：

id=

"mycanvas"
width
="400px"
height
="300px"
style="
border
:1px
solid red;"
>
您的瀏覽器不支援canvas標籤。

使用canvas arcto()繪製的弧線

如上圖所示，由於在使用arcto()繪製弧線時，「畫筆」所在的端點為(150,50)，所以座標點(150,50)就是當前端點，接著我們在arcto()方法的引數中指定了端點1(200,50)和端點2(200,100)，因此arcto()將繪製出與這三個端點所形成的夾角的兩邊相切、並且半徑為50px的圓上的一段弧線。此外，夾角兩邊與圓相切的兩個切點，將圓分成了兩段圓弧，一段就是上圖繪製出來的1/4圓弧，一段則是剩下的3/4圓弧，由於arcto()將會沿著最短圓弧的方向繪製弧線，所以繪製出來的弧線就是較短的1/4圓弧。

在上面的示例中，由於我們設定的這三個端點比較特殊，當前端點和端點2實際上就是弧線所在圓與對應的夾角兩邊相切的切點。也就是說，當前端點就在弧線所在的圓上，並且是所繪製的圓弧的起點。現在，我們再來看看當前端點不是弧線起點的情況：

當前端點不是圓弧起點時的圖形效果

通過觀察上面的顯示效果你會發現，這和我們第1個**示例的顯示效果完全一致。在此處的示例**中，我們並沒有先繪製一條直線，但是，在繪製弧線時，這裡的起始點(50,50)就是當前端點，所以arcto()將會利用起始點(50,50)、端點1(200,50)、端點2(200,100)所形成的夾角，然後繪製一段與夾角兩邊相切的圓弧。由於起始點(50,50)和端點1(200,50)所在的直線與第1個例子中當前端點(150,50)和端點1(200,50)所在的直線實際上是同一條直線，所以繪製出來的圓弧依然相同。不同的是，此時的當前端點並不是圓弧的起點，arcto()就會自動新增一條當前端點到圓弧起點的直線。於是，我們就看到了與第1個例項**完全相同的圖形效果。

canvas arcTo 用法詳解

canvasrenderingcontext2d物件的方法arcto 的用法。arcto x1,y1,x2,y2,radius arcto 方法將利用當前端點 端點1 x1,y1 和端點2 x2,y2 這三個點所形成的夾角，然後繪製一段與夾角的兩邊相切並且半徑為radius的圓上的弧線。弧線的起點就...

const用法詳解

物件導向是c 的重要特性.但是c 在c的基礎上新增加的幾點優化也是很耀眼的 就const直接可以取代c中的 define 以下幾點很重要,學不好後果也也很嚴重 1.const常量，如const int max 100 優點 const常量有資料型別，而巨集常量沒有資料型別。編譯器可以對前者進行型別安...

const 用法詳解

物件導向是c 的重要特性.但是c 在c的基礎上新增加的幾點優化也是很耀眼的 就const直接可以取代c中的 define 以下幾點很重要,學不好後果也也很嚴重 1.const常量，如const int max 100 優點 const常量有資料型別，而巨集常量沒有資料型別。編譯器可以對前者進行型別安...