详解微信小程序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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 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中使用unset销毁变量并内存释放问题
2012/07/05 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
浅谈php冒泡排序
2014/12/30 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php常量详细解析
2015/10/27 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
Javascript实现简易天数计算器
2020/05/18 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
儿童编程python入门
2018/05/08 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python下简易的单例模式详解
2019/04/08 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
django 类视图的使用方法详解
2019/07/24 Python
Python文件操作方法详解
2020/02/09 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
工程开工庆典邀请函
2014/02/01 职场文书
客户接待方案
2014/02/26 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
六年级学生期末评语
2014/12/26 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
电频谱管理的原则是什么
2022/02/18 无线电