当前位置:   article > 正文

uniapp canvas文字和元素居中

uniapp canvas文字和元素居中

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

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

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

  1. let screenWidth = 540;
  2. let screenHeight = 960;
  3. // 头像
  4. if (photoimg) {
  5. ctx.setFillStyle('#000000')
  6. ctx.save();
  7. ctx.beginPath() //开始创建一个路径
  8. ctx.arc(screenWidth / 2, 122, 40, 0, 2 * Math.PI) //画一个圆形裁剪区域
  9. ctx.strokeStyle = 'transparent';
  10. ctx.stroke();
  11. ctx.clip() //裁剪
  12. ctx.drawImage(photoimg, 230, 82, 80, 80);
  13. ctx.restore()
  14. }
  15. // 昵称
  16. if (that.userInfo) {
  17. let names = that.userInfo.nickname
  18. ctx.setFontSize(28);
  19. ctx.setFillStyle('#333333')
  20. ctx.font = 'normal blod 28px PingFangSC, PingFang SC';
  21. ctx.textAlign = "center"
  22. let titleW = ctx.measureText(names)
  23. ctx.fillText(names, screenWidth / 2, 196);
  24. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/264070
推荐阅读
相关标签
  

闽ICP备14008679号