微信小程序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 相关文章推荐
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
Node.js + express基本用法教程
2019/03/14 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python实现移位加密和解密
2019/03/22 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
机关党员进社区活动总结
2014/07/05 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
幼师中班个人总结
2015/02/12 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript