CanvasContext.arc

簡介

CanvasContext.arc 是用于畫一條弧線，創(chuàng)建一個(gè)圓?？梢杂?arc() 方法指定起始弧度為 0，終止弧度為 2 * Math.PI。用 stroke() 或者 fill() 方法在 canvas 中畫弧線。

掃碼體驗(yàn)

效果示例

示例代碼

//.js
const ctx = my.createCanvasContext('canvas')


ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()


ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()


ctx.setFontSize(12)
ctx.setFillStyle('black')
ctx.fillText('0', 165, 78)
ctx.fillText('0.5*PI', 83, 145)
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*PI', 83, 10)


ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()


ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()


ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()


ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()


ctx.draw()

顯示效果如下圖所示：

針對 arc(100, 75, 50, 0, 1.5 * Math.PI)的三個(gè)關(guān)鍵坐標(biāo)如下：

• 綠色: 圓心 (100, 75)
• 紅色: 起始弧度 (0)
• 藍(lán)色: 終止弧度 (1.5 * Math.PI)

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	描述
x	Number	圓 x 坐標(biāo)。
y	Number	圓 y 坐標(biāo)。
r	Number	圓半徑。
sAngle	Number	起始弧度，單位弧度（在3點(diǎn)鐘方向）。
eAngle	Number	終止弧度。
counterclockwise	Boolean	可選，指定弧度的方向是逆時(shí)針還是順時(shí)針，默認(rèn)為 false。