溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“小程序怎么創建二次方貝塞爾曲線”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“小程序怎么創建二次方貝塞爾曲線”吧！
創建二次貝塞爾曲線路徑。
Tip: 曲線的起始點為路徑中前一個點。
| 參數 | 類型 | 說明 |
|---|---|---|
| cpx | Number | 貝塞爾控制點的x坐標 |
| cpy | Number | 貝塞爾控制點的y坐標 |
| x | Number | 結束點的x坐標 |
| y | Number | 結束點的y坐標 |
const ctx = wx.createCanvasContext('myCanvas')// Draw pointsctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()
ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()
ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()
ctx.setFillStyle('black')
ctx.setFontSize(12)// Draw guidesctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()// Draw quadratic curvectx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()
ctx.draw()
針對 moveTo(20, 20) quadraticCurveTo(20, 100, 200, 20)的三個關鍵坐標如下：
紅色：起始點(20, 20)
藍色：控制點(20, 100)
綠色：終止點(200, 20)
感謝各位的閱讀，以上就是“小程序怎么創建二次方貝塞爾曲線”的內容了，經過本文的學習后，相信大家對小程序怎么創建二次方貝塞爾曲線這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
