小程序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 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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学习笔记汇总
2014/10/05 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
python之生成多层json结构的实现
2020/02/27 Python
Python reversed函数及使用方法解析
2020/03/17 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
迟到检讨书400字
2014/01/13 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2014年度培训工作总结
2014/11/27 职场文书
党员进社区活动总结
2015/05/07 职场文书
教师工作证明范本
2015/06/12 职场文书
安全教育的主题班会
2015/08/13 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
OpenCV实现反阈值二值化
2021/11/17 Java/Android
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python