微信小程序arc,使用arc()方法在微信小程序canvas中畫弧線
2017-12-22
導(dǎo)讀:繪圖接口和方法 canvasContext.arc 定義 畫一條弧線。 Tip : 創(chuàng)建一個(gè)圓可以用 arc() 方法指定起始弧度為0,終止弧度為 2 * Math.PI 。 Tip : 用 stroke() 或者 fill() 方法來在 canvas 中畫弧線。 參數(shù)...
canvasContext.arc
定義
畫一條弧線。
Tip: 創(chuàng)建一個(gè)圓可以用arc()
方法指定起始弧度為0,終止弧度為2 * Math.PI
。
Tip: 用stroke()
或者fill()
方法來在 canvas 中畫弧線。
參數(shù)
參數(shù) | 類型 | 說明 |
---|---|---|
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,即順時(shí)針。 |
例子
const ctx = wx.createCanvasContext('myCanvas')
// Draw coordinates
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)
// Draw points
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()
// Draw arc
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)
第二部分:如何開通一個(gè)小商店