微信小程序canvas实现文字居中

最新推荐文章于 2022-03-07 16:36:46 发布

阿啦ala

最新推荐文章于 2022-03-07 16:36:46 发布

阅读量2k

点赞数

分类专栏：微信小程序文章标签： canvas 小程序

本文链接：https://blog.csdn.net/weixin_39152200/article/details/107121683

版权

微信小程序专栏收录该内容

17 篇文章 3 订阅

订阅专栏

Canvas 2D

onLoad: function () {
    // 通过 SelectorQuery 获取 Canvas 节点
    wx.createSelectorQuery()
      .select('#canvas')
      .fields({
        node: true,
        size: true,
      })
      .exec(this.init.bind(this))
  },

  init(res) {
    const width = wx.getSystemInfoSync().screenWidth // 获取设备宽度
    const height = wx.getSystemInfoSync().screenHeight // 获取设备高度
    
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    

    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)

    ctx.font ='33px 微软雅黑';
    const str = `文字居中` // 需要绘制的文字
    ctx.fillStyle = '#000'

    ctx.font ='33px 微软雅黑';
    ctx.fillText(str,(width - ctx.measureText(str).width) * 0.5 , 50); // 绘制文字
  }