微信小程序 canvas圆角矩形的绘制

微信小程序允许对普通元素通过 border-radius的设置来进行圆角的绘制,但有时候在使用 canvas绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas将这块区域绘制出来,最后导出 canvas即可,但是 canvas没有直接提供圆角的绘制 api,所以需要 曲线救国


圆角矩形与一般矩形的区别在于,前者的四个角都是圆弧,所以只需要将一般矩形的四个角切掉,换成圆弧即可,如下图就是一个一般矩形被切掉了四个角的样子:

这里写图片描述

很明显,切掉了四个角的矩形,剩下其实就是四条 line,既然如此,完全可以跳过绘制矩形然后切角这一步,因为切角的结果就是四条边(line),直接绘制四条边即可。
然后在每两条边的缺角处绘制弧度为 0.5 * Math.PI 的圆弧,最后这四条边与四个圆弧所封闭的图形就是圆角矩形:
这里写图片描述

原理知道了,代码就很好写了,这里只说几个注意点:

  • 封闭图形的 fillStyle颜色设置为 transparent

想将封闭路径的图形绘制下来,需要调用 strokefill方法,默认 strokefill的颜色是 black,但是这里有个问题,
圆弧的绘制可能会出现锯齿或者糊边,如果 strokefill的颜色,与你所需要绘制的圆角矩形的边缘色调不一致,这种糊边的感觉会比二者色调一致的更明显,
下图第一个为色调一致,第二个为色调不一致的情况:

这里写图片描述这里写图片描述

不过据我观测,只要不是特意放大仔细看,无论是色调是否一致,其实一般人很难注意到糊边的事情

  • clip

绘制好了圆角选区之后,还需要调用 ctx.clip方法来裁剪选区

  • saverestore

如果这个矩形选区只是 canvas画布的一部分,为了避免对后续的影响,最好在 beginPath之前,将之前的动作 save,然后画完后再 restore

一个关于 canvas上绘制圆角图片,并下载到本地 的可运行示例代码已经放到 github上了,注释也比较详细,需要的可自取

其中关键代码如下:

/**
  * 
  * @param {CanvasContext} ctx canvas上下文
  * @param {number} x 圆角矩形选区的左上角 x坐标
  * @param {number} y 圆角矩形选区的左上角 y坐标
  * @param {number} w 圆角矩形选区的宽度
  * @param {number} h 圆角矩形选区的高度
  * @param {number} r 圆角的半径
  */
function roundRect(ctx, x, y, w, h, r) {
  // 开始绘制
  ctx.beginPath()
  // 因为边缘描边存在锯齿,最好指定使用 transparent 填充
  // 这里是使用 fill 还是 stroke都可以,二选一即可
  ctx.setFillStyle('transparent')
  // ctx.setStrokeStyle('transparent')
  // 左上角
  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

  // border-top
  ctx.moveTo(x + r, y)
  ctx.lineTo(x + w - r, y)
  ctx.lineTo(x + w, y + r)
  // 右上角
  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

  // border-right
  ctx.lineTo(x + w, y + h - r)
  ctx.lineTo(x + w - r, y + h)
  // 右下角
  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

  // border-bottom
  ctx.lineTo(x + r, y + h)
  ctx.lineTo(x, y + h - r)
  // 左下角
  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

  // border-left
  ctx.lineTo(x, y + r)
  ctx.lineTo(x + r, y)

  // 这里是使用 fill 还是 stroke都可以,二选一即可,但是需要与上面对应
  ctx.fill()
  // ctx.stroke()
  ctx.closePath()
  // 剪切
  ctx.clip()
}
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值