canvasrenderingcontext2d.setlinedash(array
主体: 企业支付宝小程序 、 个人支付宝小程序
设置描边的虚线样式。
影响后续 canvasrenderingcontext2d.stroke
、canvasrenderingcontext2d.stroketext
、canvasrenderingcontext2d.strokerect
使用的线条样式。
若要设置为实线,可传入空数组。
效果示例
修改属性后的效果
array segments
一组用于描述虚线交替绘制线段和间距长度的数字。奇数长度的数组会被复制拼接成偶数长度的数组再处理,例如,[1, 2, 3] 会被当做 [1, 2, 3, 1, 2, 3] 处理。如果传入空数组,则线条将重置为实线。
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.font = '48px serif'
ctx.beginpath()
// 画10像素实线,空出20像素,画10像素实线,空出20像素...以此交替
ctx.setlinedash([10, 20])
ctx.moveto(0, 50)
ctx.lineto(300, 50)
ctx.stroke()
ctx.beginpath()
// 会变成 [5, 15, 25, 5, 15, 25]
ctx.setlinedash([5, 15, 25])
ctx.moveto(0, 80)
ctx.lineto(300, 75)
ctx.stroke()
ctx.beginpath()
// 画20像素实线,空出3像素,画3像素实线,空出3像素...
ctx.setlinedash([20, 3, 3, 3, 3, 3, 3, 3])
ctx.moveto(0, 100)
ctx.lineto(300, 100)
ctx.stroketext('hello world', 50, 150)
ctx.stroke()
})
}
})
<canvas id="canvas" type="2d" onready="oncanvasready">canvas>