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);
}
相关推荐
东东51622 分钟前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设
catino25 分钟前
图片、文件的预览
前端·javascript
2501_920931702 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
layman05282 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔2 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李2 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN2 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒2 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局
PHP武器库3 小时前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
方也_arkling3 小时前
Element Plus主题色定制
javascript·sass