canvascontext.setlinecap(string linecap)
支付宝客户端 支持
支小宝客户端 支持
安诊儿客户端 支持
主体: 企业支付宝小程序 、 个人支付宝小程序
相关文档: 旧版 canvas 迁移指南
设置线条末端的样式。
线条末端的默认样式为 butt。
效果示例
代码示例执行效果
默认标题0
string linecap
线条末端的样式。
线条末端对比
.js
.axml
const ctx = my.createcanvascontext('canvas')
// 绘制辅助线
ctx.setstrokestyle('#09f')
ctx.beginpath()
ctx.moveto(60, 10)
ctx.lineto(190, 10)
ctx.moveto(60, 140)
ctx.lineto(190, 140)
ctx.stroke()
// 设置接下来要绘制的线条的样式
ctx.setstrokestyle('black')
ctx.setlinewidth(10)
ctx.beginpath()
ctx.setlinecap('butt')
ctx.moveto(75, 10)
ctx.lineto(75, 140)
ctx.stroke()
ctx.beginpath()
ctx.setlinecap('round')
ctx.moveto(125, 10)
ctx.lineto(125, 140)
ctx.stroke()
ctx.beginpath()
ctx.setlinecap('square')
ctx.moveto(175, 10)
ctx.lineto(175, 140)
ctx.stroke()
ctx.draw()
<canvas id="canvas">canvas>
左侧的线条末端的样式为 butt ,和辅助线齐平。中间的样式为 round ,线条末端增加了一个半圆,其半径为线条宽度的一半。右侧的样式为 square ,线条末端增加了一个方形,其宽度和线条宽度相同,高度是线条宽度的一半。
默认标题0