2023年微信小程序API 绘图closePath(关闭一个路径)
使用微信小程序的绘图API可以实现各种复杂的图形和动画效果。其中,canvasContext.closePath()是一个非常重要的方法,下面将对其进行详细介绍。
1. 关闭路径可以连接起点和终点
当我们使用moveTo()
创建绘图路径时,需要用lineTo()
等方法来连接各个点。最后调用closePath()
方法,即可自动连接起点和终点。这样一来,我们就不用费神去算出终点的坐标了。此外,在绘制复杂的图形时,通过关闭路径,也可以更方便地控制每个子路径的起始和结束位置。
2. 关闭路径之后需要及时调用fill或stroke方法
在调用closePath()
方法之后,必须及时调用fill()
或者stroke()
方法才能生效。如果没有及时调用,之前的路径将不会被渲染。这点需要特别注意,否则可能导致绘图出现意想不到的错误。
3. 路径可以分开绘制,但需要注意顺序
闭合路径并不是必须的,如果想要分开绘制几个路径,可以在绘制一个路径之后调用closePath()
方法,再开始绘制下一个路径。但要注意顺序,否则可能会出现重叠的情况。例如,在上一个路径没有填充或描边的时候,不能开启下一个路径。
4. 示例
const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()
以上代码创建了一个三角形,并使用closePath()
将起点和终点相连,最后调用stroke()
方法描边并渲染出来。
const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.closePath()
// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
以上代码分别绘制了三个矩形。第一个矩形使用rect()
方法创建路径并关闭,不需要填充或描边。接着使用beginPath()
创建新的路径,绘制第二个矩形并通过setFillStyle()
方法设置填充色。调用fillRect()
方法渲染出来。最后,又绘制了一个矩形,并调用fill()
方法填充整个路径。
-
B2B2C多用户商城系统支持企业自营与商户入驻模式共存 会员一站式精细化营销工具 多用户分销,带来爆发式增长
系统支持平台自营+供应商店铺共存的经营模式(类天猫&京东模式),帮助企业打造生态级商业平台为目的的电子商务系统。
免费试用系统 -
B2B2B电商交易系统优化供应链协作 授信及账期支付 商品按照数量阶梯设价
全渠道订货/采购及经销商管理数字化系统,实现供应链整合和交易便捷化。
免费试用系统 -
S2B2B电商交易系统供销一体化,提高市场集中度 集团管控一体化,有效实现供需匹配 移动应用一体化,提高运营综合效率
上下游资源整合数字化解决方案,赋能产业供应链,构建产业互联网生态体系。
免费试用系统
