微信小程序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 相关文章推荐
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP编程风格规范分享
2014/01/15 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
Python实现爬取逐浪小说的方法
2015/07/07 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
在python中修改.properties文件的操作
2020/04/08 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
航海技术专业毕业生求职信
2014/04/06 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
学校捐款活动总结
2015/05/09 职场文书
php去除deprecated的实例方法
2021/11/17 PHP