微信小程序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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
uniapp+Html5端实现PC端适配
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
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python的socket编程入门
2018/01/29 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
计算机操作自荐信
2013/12/07 职场文书
行政部主管岗位职责
2013/12/28 职场文书
科学发展观活动总结
2014/08/28 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
初三毕业评语
2014/12/26 职场文书
2015年征兵工作总结
2015/07/23 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js