HTML canvas arcTo() 方法

實(shí)例

在畫(huà)布上創(chuàng)建介于兩個(gè)切線之間的弧：

JavaScript：

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); // 創(chuàng)建起始點(diǎn) ctx.lineTo(100,20); // 創(chuàng)建水平線 ctx.arcTo(150,20,150,70,50); // 創(chuàng)建弧 ctx.lineTo(150,120); // 創(chuàng)建垂直線 ctx.stroke(); // 畫(huà)出來(lái)

運(yùn)行代碼 ?

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器版本號(hào)。

方法
arcTo()	Yes	9.0	Yes	Yes	No

定義和用法

arcTo() 方法在畫(huà)布上創(chuàng)建介于兩個(gè)切線之間的弧/曲線。

提示：請(qǐng)使用 stroke() 方法在畫(huà)布上繪制確切的弧。

JavaScript 語(yǔ)法：	context.arcTo(x1,y1,x2,y2,r);

參數(shù)值

參數(shù)	描述
x1	兩切線交點(diǎn)的橫坐標(biāo)。
y1	兩切線交點(diǎn)的縱坐標(biāo)。
x2	第二條切線上一點(diǎn)的橫坐標(biāo)。
y2	第二條切線上一點(diǎn)的縱坐標(biāo)。
r	弧的半徑。

其中第一條線上的任意一點(diǎn)的橫縱坐標(biāo)為上一次點(diǎn)的位置，此示例中為 100,20。由 (x1,y1),(x2,y2),(100,20) 三點(diǎn)可確定兩條直線的位置再由半徑確定弧的位置。

HTML canvas 參考手冊(cè)其他擴(kuò)展

上一篇：HTML canvas arc() 方法下一篇：HTML canvas isPointInPath() 方法