小程序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的Border-radius轻松制作圆角
Dec 24 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
Js基础学习资料
2010/11/23 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
医药大学生求职简历的自我评价
2013/10/17 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
比赛口号大全
2014/06/10 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP