微信小程序允许对普通元素通过 border-radius
的设置来进行圆角的绘制,但有时候在使用 canvas
绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas
将这块区域绘制出来,最后导出 canvas
即可,但是 canvas
没有直接提供圆角的绘制 api
,所以需要 曲线救国
圆角矩形与一般矩形的区别在于,前者的四个角都是圆弧,所以只需要将一般矩形的四个角切掉,换成圆弧即可,如下图就是一个一般矩形被切掉了四个角的样子:
很明显,切掉了四个角的矩形,剩下其实就是四条 line
,既然如此,完全可以跳过绘制矩形然后切角这一步,因为切角的结果就是四条边( line
),直接绘制四条边即可。 然后在每两条边的缺角处绘制弧度为 0.5 * Math.PI
的圆弧,最后这四条边与四个圆弧所封闭的图形就是圆角矩形:
原理知道了,代码就很好写了,这里只说几个注意点:
fillStyle 颜色设置为 transparent
想将封闭路径的图形绘制下来,需要调用 stroke
或 fill
方法,默认 stroke
或 fill
的颜色是 black
,但是这里有个问题, 圆弧的绘制可能会出现锯齿或者糊边,如果 stroke
或 fill
的颜色,与你所需要绘制的圆角矩形的边缘色调不一致,这种糊边的感觉会比二者色调一致的更明显, 下图第一个为色调一致,第二个为色调不一致的情况:
不过据我观测,只要不是特意放大仔细看,无论是色调是否一致,其实一般人很难注意到糊边的事情
clip
绘制好了圆角选区之后,还需要调用 ctx.clip
方法来裁剪选区
save
与 restore
如果这个矩形选区只是 canvas
画布的一部分,为了避免对后续的影响,最好在 beginPath
之前,将之前的动作 save
,然后画完后再 restore
一个关于
在 canvas
上绘制圆角图片,并下载到本地
的可运行示例代码已经放到 nofollow" target="_blank" href="https://github.com/accforgit/blog-data/tree/master/%E5%B0%8F%E7%A8%8B%E5%BA%8Fcanvas%E7%BB%98%E5%88%B6%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2/project">github 上了,注释也比较详细,需要的可自取
其中关键代码如下:
// border-top
ctx.moveto(x + r,y)
ctx.lineto(x + w - r,y)
ctx.lineto(x + w,y + r)
// 右上角
ctx.arc(x + w - 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,Math.PI * 0.5)
// border-bottom
ctx.lineto(x + r,y + h)
ctx.lineto(x,y + h - r)
// 左下角
ctx.arc(x + 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()
}
ps:微信小程序canvas把正方形图片绘制成圆形
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。