溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“微信小程序怎么創(chuàng)建三次方貝塞爾曲線路徑”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
創(chuàng)建三次方貝塞爾曲線路徑。
Tip: 曲線的起始點為路徑中前一個點。
| 參數 | 類型 | 說明 |
|---|---|---|
| cp1x | Number | 第一個貝塞爾控制點的 x 坐標 |
| cp1y | Number | 第一個貝塞爾控制點的 y 坐標 |
| cp2x | Number | 第二個貝塞爾控制點的 x 坐標 |
| cp2y | 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.arc(200, 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(150, 75)
ctx.moveTo(200, 20)
ctx.lineTo(200, 100)
ctx.lineTo(70, 75)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()// Draw quadratic curvectx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()
ctx.draw()
針對 moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三個關鍵坐標如下：
紅色：起始點(20, 20)
藍色：兩個控制點(20, 100) (200, 100)
綠色：終止點(200, 20)
“微信小程序怎么創(chuàng)建三次方貝塞爾曲線路徑”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
