利用canvas画带圆角矩形,我使用的方法如下:
const borderRadius = 4
const x = 100
const y = 100
const borderWidth = 1
const width = 200
const height = 100
ctx.arc(x + borderRadius, y + borderRadius, borderRadius - borderWidth, 1 * Math.PI, 1.5 * Math.PI)
ctx.lineTo(x + width - borderRadius, y + borderWidth)
ctx.arc(x + width - borderRadius, y + borderRadius, borderRadius - borderWidth, 1.5 * Math.PI, 0)
ctx.lineTo(x + width - borderWidth, y + height - borderRadius)
ctx.arc(x + width - borderRadius, y + height - borderRadius, borderRadius - borderWidth, 0, 0.5 * Math.PI)
ctx.lineTo(x + borderRadius, y + height - borderWidth)
ctx.arc(x + borderRadius, y + height - borderRadius, borderRadius - borderWidth, 0.5 * Math.PI, Math.PI)
ctx.lineTo(x + borderWidth, y + borderRadius)
ctx.closePath()
ctx.stroke()