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);
}
相关推荐
HWL5679几秒前
pnpm(Performant npm)的安装
前端·vue.js·npm·node.js
石小石Orz21 分钟前
浏览器的预检请求OPTIONS到底有什么用?
前端
落雪小轩韩25 分钟前
网格布局 CSS Grid
前端·css
parade岁月27 分钟前
Vue 3 父子组件模板引用的时序陷阱与解决方案
前端
xianxin_32 分钟前
CSS Outline(轮廓)
前端
moyu8432 分钟前
遮罩层设计与实现指南
前端
Sammyyyyy38 分钟前
2025年,Javascript后端应该用 Bun、Node.js 还是 Deno?
开发语言·javascript·node.js
小白_ysf39 分钟前
uniapp 开发微信小程序,获取经纬度并且转化详细地址(单独封装版本)
微信小程序·uni-app
Pedantic41 分钟前
用 SwiftUI 打造一个 iOS「设置」界面
前端
timeweaver1 小时前
深度解析 Nginx 前端 location 配置与优先级:你真的用对了吗?
前端·nginx·前端工程化