小程序--Canvas文字居中

最近在维护我的小程序,加了一个小功能。

功能描述:在一个canvas上输出的文字居中

找了一下官网的API:

  1. 输出文字:fillText
  2. 居中:setTextAlign

然后我就写了如下代码:

效果如下图:

并没有在屏幕中间,然后我又搜了一下MDN上的解释:

注意红色划线的解释:对齐方式是以 X 的值为基点,然后在看看官网的 setTextAlign 最下面的图:

加上上面那句话,再看这张图片就很好理解了(微信小程序团队的小伙伴还真隐晦)。

有上面的一些准备就好办了,只要把 x 的值设置为canvas宽度的一半就好了。

因为我设置的canvas的宽度是100%,所以还得拿到屏幕的可用宽度,所以代码如下:

效果如下:

你以为现在结束了吗?

我还要提供另一种解法:

返回文本的宽度,代码如下:

效果也是一样的。

注意:

  1. measureText是在1.9.90版本加上的,有兼容性问题
  2. 用此方法时,要在设置字体大小、样式之后,不然计算的是未设置之前的宽度

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2018-06-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 切换 顶

用户可以点击切换按钮来更改状态。 通常,当您有一个ON / OFF选项时,您可以使用切换按钮。 如果您要一组中的多个选项中选中/取消选中,请改用material...

752
来自专栏柠檬先生

Angularjs基础(八)

AngularJS Bootstrap     AngularJS 的首选样式表是 Twitter Bootstrap ,Twitter Bootstrap ...

2146
来自专栏达摩兵的技术空间

css3媒体查询简介

<link rel="stylesheet" media="min-width=900" />

895
来自专栏24K纯开源

ChartDirector应用笔记(三)

前言 继上篇文章(Simple bar chart)推出之后,本篇文章继续ChartDirector的使用。在这篇Blog中,博主实现的是soft lighti...

22110
来自专栏一“技”之长

Bootstrap响应式前端框架笔记十八——导航滚动监听

    Bootstrap框架中提供了十分方便的方法来使用导航关联内容快,并且开发者可以监听滚动进行导航按钮的切换,示例如下:

961
来自专栏一个爱瞎折腾的程序猿

HTML5学习笔记

参考资料:http://www.runoob.com/html/html-tutorial.html

1673
来自专栏数据小魔方

动态图表系列6|列表框(offset函数)

今天跟大家分享动态图表系列6——列表框(offset函数)! 具体步骤与前一篇相同: 插入列表框制作选择菜单; 使用offset函数返回动态数据源; 插入图表。...

3245
来自专栏王磊的博客

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言:   目前关于rn比较知名并且封装好的图片选择控件很多,不过能同时支持多图片上传,个数控制兼容iOS/Ad的却寥寥无几,而今天介绍的这款框架可以实现:图片...

45614
来自专栏积累沉淀

JavaScript 事件基础补充

JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击。当用户执行某些操作的时候,再去执行一系列代码。 一.事件介绍 JavaScri...

2435
来自专栏极乐技术社区

微信小程序开发详解《五》布局基础

1:Flex布局 Flex布局如图所示 image.png 1.1 Flex容器属性 image.png 1.2 Flex容器内元素属性 image...

5315

扫码关注云+社区

领取腾讯云代金券