canvasContext.bezierCurveTo
定义
创建三次方贝塞尔曲线路径。
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 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)
***本网站图片，文字之类版权申明，因为网站可以由注册用户自行上传图片或文字，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。
我要评论
最新文章
热门阅读
热评文章
热门标签
考古APP开发 感受历史的魅力考古APP开发安全教育app开发解决方案门店小程序类目资质表广州APP开发企业APP制作公司一招告诉你小程序码怎么生成？一文告诉你为什么鲜花店老板主动要做小程序?微信小程序好做吗？如何制作一个购买东西的小程序上海茶楼预约小程序开发越来越受青睐微信运营公众平台开发小技巧大用途为什么说门店小程序和普通小程序有着天壤之别？现在使用微信小程序收费吗微信小程序开发要很多钱吗？小程序分销超过三级西安哪些行业适合开发微信小程序微信小程序插件的有什么意义呢？零基础开发小程序商城之支付功能什么样的微信小程序会是爆款个人如何开发微信小程序新手如何制作小程序微信小程序开发文档之本地调试配置如何搭建深圳做得好的小程序公司如何选择一家好的小程序开发公司西安微信小程序创业为什么会失败微信小程序的存在价值你知道吗？微信小程序登录授权界面如何开发小程序开发:哪类行业小程序比较容易成功？小程序定位附近店铺带来的商机，如何创建小程序全屏展示图片的实现方式微信小程序支付申请微信小程序支付开发详解