微信小程序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实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 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 curl 获取响应的状态码的方法
2014/01/13 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
smarty表格换行实例
2014/12/15 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Python的collections模块真的很好用
2021/03/01 Python
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
如何进行有效的自我评价
2013/09/27 职场文书
幼师自荐信
2013/10/26 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
幼儿园秋游感想
2014/03/12 职场文书
干部个人考察材料
2014/12/24 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis