小程序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实现的动画加载导航
Oct 08 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Python代码调试的几种方法总结
2015/04/15 Python
python实现Adapter模式实例代码
2018/02/09 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
简单了解python的内存管理机制
2019/07/08 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Python中常见的数制转换有哪些
2020/05/27 Python
业务代表的岗位职责
2013/11/16 职场文书
医院实习介绍信
2014/01/12 职场文书
环保建议书作文
2014/03/12 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2015年领班工作总结
2015/04/29 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript