建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)小程序教程：使用arc()方法在微信小程序canvas中畫弧線
繪圖接口和方法
創(chuàng)新互聯(lián)建站成立10多年來，這條路我們正越走越好，積累了技術(shù)與客戶資源，形成了良好的口碑。為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁設(shè)計、域名注冊、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補等服務(wù)。網(wǎng)站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等，這些對于網(wǎng)站建設(shè)都非常重要，創(chuàng)新互聯(lián)建站通過對建站技術(shù)性的掌握、對創(chuàng)意設(shè)計的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進步。
canvasContext.arc
定義
畫一條弧線。
Tip: 創(chuàng)建一個圓可以用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點鐘方向） |
| eAngle | Number | 終止弧度 |
| counterclockwise | Boolean | 可選。指定弧度的方向是逆時針還是順時針。默認是false，即順時針。 |
例子
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)的三個關(guān)鍵坐標(biāo)如下：
- 綠色: 圓心 (100, 75)
- 紅色: 起始弧度 (0)
- 藍色: 終止弧度 (1.5 * Math.PI)
繪圖接口和方法
網(wǎng)頁標(biāo)題：創(chuàng)新互聯(lián)小程序教程：使用arc()方法在微信小程序canvas中畫弧線
網(wǎng)站URL：http://m.fisionsoft.com.cn/article/cddhsio.html
