189 8069 5689

创新互联小程序教程：在微信小程序API绘图中创建三次方贝塞尔曲线路径

绘图接口和方法

为企业提供成都网站设计、成都做网站、外贸网站建设、网站优化、成都全网营销、竞价托管、品牌运营等营销获客服务。创新互联公司拥有网络营销运营团队，以丰富的互联网营销经验助力企业精准获客，真正落地解决中小企业营销获客难题，做到“让获客更简单”。自创立至今，成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题，同时降低了营销成本，提高了有效客户转化率，获得了众多企业客户的高度认可！

canvasContext.bezierCurveTo

定义

创建三次方贝塞尔曲线路径。

Tip: 曲线的起始点为路径中前一个点。

参数

参数类型说明
cp1xNumber第一个贝塞尔控制点的 x 坐标
cp1yNumber第一个贝塞尔控制点的 y 坐标
cp2xNumber第二个贝塞尔控制点的 x 坐标
cp2yNumber第二个贝塞尔控制点的 y 坐标
xNumber结束点的 x 坐标
yNumber结束点的 y 坐标

例子

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) 的三个关键坐标如下：

  • 红色：起始点(20, 20)
  • 蓝色：两个控制点(20, 100) (200, 100)
  • 绿色：终止点(200, 20)

绘图接口和方法


新闻名称：创新互联小程序教程：在微信小程序API绘图中创建三次方贝塞尔曲线路径
新闻来源：http://cdxtjz.cn/article/dpcdohj.html

其他资讯