小程序canvas中文字设置居中锚点


Posted in HTML / CSS onApril 16, 2019

 小程序中经常会遇到要生成图片的需求,图片一般会加上用户的头像和昵称之类的,头像只需要把腾讯域名添加到request和download列表中,使用wx.getImageInfo()就可以缓存到本地,成功的回调再添加进canvas中生成图片。

如果要文字在某个位置居中,canvas中文字怎么根据文字长短不一实现锚点在文字中心位置呢?

var txtWidth=canvas.measureText(this.nickName).width能获取到在canvas中文字的宽度,找到文字的居中x位置减去txtWidth/2就可以实现居中,如果参数是number类型转换为字符串类型,否则在部分iOS机型上无效,不能获取文字宽度。
 

总结

以上所述是小编给大家介绍的小程序canvas中文字设置居中锚点 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 #HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 #HTML / CSS
html5唤醒APP小记
Mar 27 #HTML / CSS
html5录音功能实战示例
Mar 25 #HTML / CSS
浅析HTML5中的download属性使用
Mar 13 #HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 #HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 #HTML / CSS
You might like
人族 TERRAN 概述
2020/03/14 星际争霸
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
jquery延迟对象解析
2016/10/26 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
深入理解python中的select模块
2017/04/23 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Python bytes string相互转换过程解析
2020/03/05 Python
python代码xml转txt实例
2020/03/10 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
竞选大队委员演讲稿
2014/04/28 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
应届生自荐书
2014/06/23 职场文书
社区节水倡议书
2015/04/29 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
领导欢送会主持词
2015/07/06 职场文书
干部考核工作总结
2015/08/12 职场文书
学校体育节班级口号
2015/12/25 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python