微信小程序 canvas圆角矩形的绘制
微信小程序允许对普通元素通过 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
上绘制圆角图片,并下载到本地 的可运行示例代码已经放到 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-topctx.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-rightctx.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-bottomctx.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-leftctx.lineTo(x, y + r)ctx.lineTo(x + r, y)// 这里是使用 fill 还是 stroke都可以,二选一即可,但是需要与上面对应ctx.fill()// ctx.stroke()ctx.closePath()// 剪切ctx.clip()
}
微信小程序 canvas圆角矩形的绘制相关推荐
- 用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法 发布时间:2020-10-04 18:20:31 来源:脚本之家 阅读:103 作者:清夜 微信小程序允许对普通元素通过 border-radius 的 ...
- canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...
- 微信小程序canvas把正方形图片绘制成圆形
在微信小程序里效果图: 直接代码: <canvas style="width: 400px; height: 400px;border:1px solid red" canv ...
- 微信小程序 canvas type = 2d 绘制海报心得(包括怎么绘制图片和圆角图片和圆角矩形等)
微信小程序 canvas type=2d 使用心得 为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
- 微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行 在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生 ...
- 微信 html 字体 自动换行,详解微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvascontext.filltext参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 微信小程序Canvas绘图API
微信小程序Canvas绘图API 前言 使用姿势 常用API(以下API都是通过CanvasContext对象进行调用) 颜色.样式 setFillStyle(string|CanvasGradien ...
- 微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
- 微信小程序canvas实现签名功能
微信小程序canvas实现签名功能 在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场 文章目录 微信小程序canvas实现签名功能 前言 一.微信小程序canvas实现签 ...
最新文章
- linux 线程 pthread_create 源码 剖析
- js-forEach 不能使用break continue return true false
- c# 无法将类型隐式转换_C#中的隐式类型数组
- java中的switch的规则_细细讲述Java技术开发的那些不为人知的规则
- Linux下kvm:检测硬件是否支持虚拟化
- JDK 8_jstack命令使用
- ads出现村田电容电感无法仿真的问题解决(`BJT1' is an instance of an undefined model `BJTM1')...
- datagrid 表格数据填充方式
- Java虚拟机栈和本地方法栈
- 汽车电子零部件可靠性测试
- 概率统计13——二项分布与多项分布
- 短信工具类——mo信通
- 奕新集团RAC 11g 生产库环境(待完善无图)
- 取消google二次验证码要怎么进行处理
- Eclipse运行tomcat出现错误“An incompatible version [1.1.33] of the APR based。。。 ”问题的解决
- ISCC ISCC客服一号冲冲冲(二)
- 用龙芯1c库实现无源蜂鸣器唱歌《送别》
- golang求多边形相交面积
- vimium:全键盘操作插件 Chrome插件图文教程
- Windows10 WIFI蓝牙图标消失,网卡驱动出现感叹号等无法上网的情况解决方案