canvasrenderingcontext2d.roundrect(number x, number y, number width, number height, number | array
基础库 或更高版本, 且 支付宝客户端 10.5.26 或更高版本。 若版本较低,建议采取 兼容处理。
主体: 企业支付宝小程序 、 个人支付宝小程序
添加一个圆角矩形至当前路径。
效果示例
代码示例运行效果
number x
矩形起点的横坐标。
number y
矩形起点的纵坐标。
number width
矩形的宽度。
number height
矩形的高度。
number | array radii
矩形圆角的圆弧半径,与 css border-radius
语法相同。
all-corners
[all-corners]
[top-left-and-bottom-right, top-right-and-bottom-left]
[top-left, top-right-and-bottom-left, bottom-right]
[top-left, top-right, bottom-right, bottom-left]
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.beginpath()
ctx.strokestyle = "blue"
ctx.roundrect(10, 10, 150, 100, [40])
ctx.stroke()
ctx.strokestyle = "orange"
ctx.beginpath()
ctx.roundrect(10, 120, 150, 100, [10, 40])
ctx.stroke()
ctx.strokestyle = "green"
ctx.beginpath()
ctx.roundrect(170, 80, 170, 100, [0, 30, 50, 60])
ctx.stroke()
})
}
})
<canvas id="canvas" type="2d" onready="oncanvasready" width="400" height="300">canvas>