详解微信小程序canvas圆角矩形的绘制的方法


Posted in Javascript onAugust 22, 2018

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

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

详解微信小程序canvas圆角矩形的绘制的方法

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

详解微信小程序canvas圆角矩形的绘制的方法

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

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

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

详解微信小程序canvas圆角矩形的绘制的方法

详解微信小程序canvas圆角矩形的绘制的方法

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

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()
}

ps:微信小程序canvas把正方形图片绘制成圆形

<canvas style="width: 400px; height: 400px;border:1px solid red" canvas-id="firstCanvas"></canvas>
//index.js
Page({
 data: {
  image: {
   src: "/1.png",
   width: 200,
   heigth: 200
  }
 },
 onLoad: function () {
  let that = this;
  var contex = wx.createCanvasContext('firstCanvas')
  contex.save(); // 先保存状态 已便于画完圆再用
  contex.beginPath(); //开始绘制
  //先画个圆
  contex.arc(100, 100, 100, 0, Math.PI * 2, false);
  contex.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内
  contex.drawImage(that.data.image.src, 0, 0, that.data.image.width, that.data.image.heigth); // 推进去图片
  contex.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
  contex.draw();
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
解决element UI 自定义传参的问题
Aug 22 #Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 #Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 #Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 #Javascript
Vue动态获取width的方法
Aug 22 #Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 #Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 #Javascript
You might like
PHP一些有意思的小区别
2006/12/06 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
用于table内容排序
2006/07/21 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
给分销商的致歉信
2014/01/14 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
教你一步步实现一个简易promise
2021/11/02 Javascript
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android