小程序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 响应式媒体查询的示例代码
Sep 25 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 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
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
jquery中this的使用说明
2010/09/06 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python 命令行传入参数实现解析
2019/08/30 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
python如何提升爬虫效率
2020/09/27 Python
新闻记者实习自我鉴定
2013/09/19 职场文书
新闻编辑求职信
2014/04/09 职场文书
小学生综合素质评语
2014/04/23 职场文书
毕业生求职信
2014/06/10 职场文书
化验室岗位职责
2015/02/14 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
MySQL分区表管理命令汇总
2022/03/21 MySQL