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画带圆角矩形所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。