微信小程序canvas实现水平、垂直居中效果


Posted in HTML / CSS onFebruary 05, 2020

最近做一个刮刮卡,需要将文字在canvas中水平、垂直居中

微信小程序canvas实现水平、垂直居中效果

wxml

<canvas type='2d' id="myCanvas" width="300" height="150"  style="background:yellow;" \>

 

使用canvas2d构建画布

微信小程序canvas实现水平、垂直居中效果

蓝色线为水平中线

红色线为垂直中线

文本设置方法

fillText 方法为canvas设置文本方法,使用如下所示

ctx.fillText('文本内容', x, y)

x为横轴坐标

y为纵轴坐标

上例将文本内容设置在canvas画布的坐标位置上,跳脱web的开发思维,我们可以认为X点相对于文本有左,中,右三种布局,Y点相对于文本有上、中、下的布局,这样就很好理解文本在canvas上是如何绘制了

水平居中

找到X轴的中点位置,如上图,在150px这个点上

注意X点相对于文本的位置

ctx.fillStyle = '#aaa'
ctx.font = 'bold 30px "Gill Sans Extrabold"'
ctx.textAlign = 'center'
ctx.fillText('文本内容', 150, 0)

微信小程序canvas实现水平、垂直居中效果

图示只作说明

垂直居中

找到X轴的中点位置,如上图,在75px这个点上

注意Y点相对于文本的位置

 

ctx.fillStyle = '#aaa'
ctx.font = 'bold 30px "Gill Sans Extrabold"'
ctx.textBaseline = 'middle'
ctx.fillText('文本内容', 0, 75)

微信小程序canvas实现水平、垂直居中效果

图示只作说明

完美居中

ctx.fillStyle = '#aaa'
ctx.font = 'bold 30px "Gill Sans Extrabold"'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(opts.maskerTitle, left, top)

总结

以上所述是小编给大家介绍的小程序中canvas实现水平、垂直居中效果,希望对大家有所帮助!

HTML / CSS 相关文章推荐
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
Html5定位终极解决方案
Feb 05 #HTML / CSS
canvas简单连线动画的实现代码
Feb 04 #HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 #HTML / CSS
canvas实现烟花的示例代码
Jan 16 #HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 #HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 #HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 #HTML / CSS
You might like
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
Redis构建分布式锁
2017/03/28 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python通过Pillow实现图片对比
2020/04/29 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
行政主管职责范本
2014/03/07 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Python数据分析之绘图和可视化详解
2021/06/02 Python