uniapp canvas文字和元素居中

文字居中:ctx.textAlign = "center";

元素居中:ctx.arc(screenWidth / 2, 122, 40, 0, 2 * Math.PI);

ctx.arc()的x轴为当前屏幕的宽度/2;

javascript 复制代码
let screenWidth = 540;
let screenHeight = 960;
// 头像
if (photoimg) {
    ctx.setFillStyle('#000000')
	ctx.save();
	ctx.beginPath() //开始创建一个路径
	ctx.arc(screenWidth / 2, 122, 40, 0, 2 * Math.PI) //画一个圆形裁剪区域
	ctx.strokeStyle = 'transparent';
	ctx.stroke();
	ctx.clip() //裁剪
	ctx.drawImage(photoimg, 230, 82, 80, 80);
	ctx.restore()	
}
				
// 昵称
if (that.userInfo) {
	let names = that.userInfo.nickname
	ctx.setFontSize(28);
	ctx.setFillStyle('#333333')
	ctx.font = 'normal blod 28px PingFangSC, PingFang SC';
	ctx.textAlign = "center"
	let titleW = ctx.measureText(names)
	ctx.fillText(names, screenWidth / 2, 196);
}
相关推荐
半兽先生15 分钟前
WebRtc 视频流卡顿黑屏解决方案
java·前端·webrtc
南星沐1 小时前
Spring Boot 常用依赖介绍
java·前端·spring boot
孙_华鹏2 小时前
手撸一个可以语音操作高德地图的AI智能体
前端·javascript·coze
zhangxingchao2 小时前
Jetpack Compose 动画
前端
老李不敲代码2 小时前
榕壹云外卖跑腿系统:基于Spring Boot+MySQL+UniApp的智慧生活服务平台
spring boot·mysql·微信小程序·uni-app·软件需求
@PHARAOH2 小时前
HOW - 缓存 React 自定义 hook 的所有返回值(包括函数)
前端·react.js·缓存
拉不动的猪2 小时前
设计模式之--------工厂模式
前端·javascript·架构
前端开发张小七3 小时前
16.Python递归详解:从原理到实战的完整指南
前端·python
陈奕迅本讯3 小时前
操作系统 3.6-内存换出
前端
Aphelios3803 小时前
TaskFlow开发日记 #1 - 原生JS实现智能Todo组件
java·开发语言·前端·javascript·ecmascript·todo