Canvas 绘画圆角按钮

最新推荐文章于 2024-08-16 18:48:55 发布

两只小蚂蚁

最新推荐文章于 2024-08-16 18:48:55 发布

阅读量378

点赞数

分类专栏： Canvas 文章标签： javascript

本文链接：https://blog.csdn.net/knijiokm/article/details/130422200

版权

Canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

export function drawButton(ctx, color, x, y, width, height, radius, text) {
  //x/y:按钮起始点,width/height按钮宽高,radius弧度
  //分为4条直线4个圆角绘制
  ctx.save()
  ctx.beginPath()
  ctx.fillStyle = color
  ctx.moveTo(x + radius, y)
  ctx.lineTo(x + width - radius, y)
  ctx.arc(x + width - radius, y + radius, radius, (Math.PI * 3) / 2, Math.PI * 2)
  ctx.lineTo(x + width, y + height - radius)
  ctx.arc(x + width - radius, y + height - radius, radius, Math.PI, Math.PI / 2)
  ctx.lineTo(x + radius, y + height)
  ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI)
  ctx.lineTo(x, y + radius)
  ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2)
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.fillStyle = "#fff"
  ctx.font = 14 + "px serif"
  ctx.textAlign = "center"
  ctx.textBaseline = "middle"
  ctx.fillText(text, x + width / 2, y + height / 2)
  ctx.restore()
}