canvas画带圆角矩形

利用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()

最后

以上就是鲤鱼秀发最近收集整理的关于canvas画带圆角矩形的全部内容，更多相关canvas画带圆角矩形内容请搜索靠谱客的其他文章。