您现在的位置是：网站首页> 编程资料编程资料

微信小程序canvas实现水平、垂直居中效果微信小程序之html5 canvas绘图并保存到系统相册小程序canvas中文字设置居中锚点 基于Jscex +HTML5 Canvas 制作的抽奖小程序

2021-08-30 1210人已围观

简介 这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

最近做一个刮刮卡，需要将文字在canvas中水平、垂直居中

wxml

 

使用canvas2d构建画布

蓝色线为水平中线

红色线为垂直中线

文本设置方法

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)

图示只作说明

垂直居中

找到X轴的中点位置，如上图，在75px这个点上

注意Y点相对于文本的位置

 

 ctx.fillStyle = '#aaa' ctx.font = 'bold 30px "Gill Sans Extrabold"' ctx.textBaseline = 'middle' ctx.fillText('文本内容', 0, 75)

图示只作说明

完美居中

 ctx.fillStyle = '#aaa' ctx.font = 'bold 30px "Gill Sans Extrabold"' ctx.textAlign = 'center' ctx.textBaseline = 'middle' ctx.fillText(opts.maskerTitle, left, top)

总结

以上所述是小编给大家介绍的小程序中canvas实现水平、垂直居中效果，希望对大家有所帮助！

上一篇：Html5定位终极解决方案html5 制作地图当前定位箭头的方法示例Html5获取高德地图定位天气的方法HTML5地理定位_动力节点Java学院整理HTML5地理定位与第三方工具百度地图的应用HTML5的Geolocation地理位置定位API使用教程HTML5实现获取地理位置信息并定位功能HTML5地理定位实例html5定位获取当前位置并在百度地图上显示html5定位并在百度地图上显示的示例利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上

下一篇：HTML5 实现图片上传预处理功能Html5实现单张、多张图片上传功能html5拖拽排序多图片上传插件特效源码html5实现的头像图片上传并截图修改保存功能源码HTML5实现移动端上传图片滤镜特效源码HTML5实现手机端图片上传裁剪特效源码HTML5 Plus 实现手机APP拍照或相册选择图片上传功能

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网