繪圖接口和方法

為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、成都全網(wǎng)營銷、競價(jià)托管、品牌運(yùn)營等營銷獲客服務(wù)。創(chuàng)新互聯(lián)公司擁有網(wǎng)絡(luò)營銷運(yùn)營團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時(shí)降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！

canvasContext.bezierCurveTo

---

定義

創(chuàng)建三次方貝塞爾曲線路徑。

Tip: 曲線的起始點(diǎn)為路徑中前一個(gè)點(diǎn)。

參數(shù)

參數(shù)	類型	說明
cp1x	Number	第一個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
cp1y	Number	第一個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
cp2x	Number	第二個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
cp2y	Number	第二個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
x	Number	結(jié)束點(diǎn)的 x 坐標(biāo)
y	Number	結(jié)束點(diǎn)的 y 坐標(biāo)

例子

const ctx = wx.createCanvasContext('myCanvas')

// Draw points
ctx.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 guides
ctx.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 curve
ctx.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) 的三個(gè)關(guān)鍵坐標(biāo)如下：

• 紅色：起始點(diǎn)(20, 20)
• 藍(lán)色：兩個(gè)控制點(diǎn)(20, 100) (200, 100)
• 綠色：終止點(diǎn)(200, 20)

繪圖接口和方法

本文名稱：創(chuàng)新互聯(lián)小程序教程：在微信小程序API繪圖中創(chuàng)建三次方貝塞爾曲線路徑
文章分享：http://uogjgqi.cn/article/dpcdohj.html