canvascontext.closepath()
主体: 企业支付宝小程序 、 个人支付宝小程序
相关文档: 旧版 canvas 迁移指南
canvascontext.closepath 用于关闭一个路径。会连接起点和终点。
如果关闭路径后没有调用 或者 并开启了新的路径,则之前的路径将不会被渲染。
示例代码 1
示例代码 2
//.js
const ctx = my.createcanvascontext('canvas')
// 创建三角形底和高并关闭路径
ctx.beginpath()
ctx.moveto(20, 20)
ctx.lineto(20, 120)
ctx.lineto(120, 120)
ctx.closepath()
ctx.stroke()
// 创建三角形底和高但不关闭路径
ctx.beginpath()
ctx.moveto(130, 20)
ctx.lineto(130, 120)
ctx.lineto(230, 120)
// ctx.closepath()
ctx.stroke()
ctx.draw()
只创建三角形的底和高,关闭路径时会自动连接起点和终点。
关闭路径
不关闭路径
//.js
const ctx = my.createcanvascontext('canvas')
ctx.beginpath()
ctx.moveto(20, 20)
ctx.lineto(20, 120)
ctx.lineto(120, 120)
ctx.closepath()
// 如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径,则路径将不会被渲染
// ctx.stroke()
ctx.beginpath()
ctx.moveto(130, 20)
ctx.lineto(130, 120)
ctx.lineto(230, 120)
ctx.closepath()
ctx.stroke()
ctx.draw()
创建两个三角形,但由于其中一个三角形关闭路径后没有调用 stroke 就开始了新的路径,因此画布中只会渲染出一个三角形