canvas arcTo 用法詳解

canvasrenderingcontext2d物件的方法arcto()的用法。

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

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

弧線的起點就是當前端點所在邊與圓的切點，弧線的終點就是端點2(x2,y2)所在邊與圓的切點，並且繪製的弧線是兩個切點之間長度最短的那個圓弧。

此外，如果當前端點不是弧線起點，arcto()方法還將新增一條當前端點到弧線起點的直線線段。

//
獲取canvas物件(畫布)
var canvas = document.getelementbyid("mycanvas");
//簡單地檢測當前瀏覽器是否支援canvas物件，以免在一些不支援html5的瀏覽器中提示語法錯誤
if(canvas.getcontext);
//端點2
var p2 =;
//繪製與當前端點、端點1、端點2三個點所形成的夾角的兩邊相切並且半徑為50px的圓的一段弧線
ctx.arcto(p1.x, p1.y, p2.x, p2.y, 50);
//設定線條顏色為藍色
ctx.strokestyle = "blue";
//按照上述繪製路徑繪製弧線
ctx.stroke();
}

使用canvas arcto()繪製的弧線

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

此外，夾角兩邊與圓相切的兩個切點，將圓分成了兩段圓弧，一段就是上圖繪製出來的1/4圓弧，一段則是剩下的3/4圓弧，由於arcto()將會沿著最短圓弧的方向繪製弧線，所以繪製出來的弧線就是較短的1/4圓弧。

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

//
獲取canvas物件(畫布)
var canvas = document.getelementbyid("mycanvas");
//簡單地檢測當前瀏覽器是否支援canvas物件，以免在一些不支援html5的瀏覽器中提示語法錯誤
if(canvas.getcontext);
//端點2
var p2 =;
//繪製與當前端點、端點1、端點2三個點所形成的夾角的兩邊相切並且半徑為50px的圓的一段弧線
ctx.arcto(p1.x, p1.y, p2.x, p2.y, 50);
//設定線條顏色為藍色
ctx.strokestyle = "blue";
//按照上述繪製路徑繪製弧線
ctx.stroke();
}

對應的顯示效果如下圖：

通過觀察上面的顯示效果你會發現，這和我們第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 用法詳解

canvas arcTo 用法詳解

const用法詳解

const 用法詳解

canvas arcTo 用法詳解

canvas arcTo 用法詳解

const用法詳解

const 用法詳解

相關推薦