收藏
回答

canvas画布求区域面积或像素的问题?

请问有没有老师知道canvas画布如何求闭合区域面积或像素的问题

回答关注问题邀请回答
收藏

1 个回答

  • 微盟
    微盟
    2022-11-06

    一般要做屏幕的分辨率和rpx到设计稿(一般设计稿按750px宽)像素之间的转换

    // pages/canvas/index.js
    Page({
      /**
       * 像素转换
       * @param {*} arg 
       */
      rpx2px(arg) {
        const info = wx.getSystemInfoSync()
        const width = info.screenWidth
        return arg * width / 750
      },
      /**
       * 页面的初始数据
       */
      data: {},
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady() {
        const query = wx.createSelectorQuery()
        query.select('#cid')
          .fields({
            node: true,
            size: true
          })
          .exec((res) => {
            // Canvas 对象
            const canvas = res[0].node
            this.canvas = canvas
            // Canvas 画布的实际绘制宽高
            const width = res[0].width
            const height = res[0].height
            // 创建canvas渲染上下文
            const ctx = canvas.getContext('2d')
            const dpr = wx.getWindowInfo().pixelRatio
            console.log('---dpr', dpr)
            // 手动改变canvas的宽和高
            canvas.width = width * dpr
            canvas.height = height * dpr
            console.log(canvas.width, canvas.height)
            ctx.scale(dpr, dpr)
            ctx.fillStyle = 'orange'
            // 矩形填充
            ctx.fillRect(this.rpx2px(0), this.rpx2px(0), this.rpx2px(750), this.rpx2px(500))
            ctx.fillStyle = '#000000'
            ctx.font = `bold ${this.rpx2px(80)}px 宋体`
            ctx.textAlign = "center"
            // 文本水平居中
            ctx.fillText('你好世界'this.rpx2px(750 / 2), this.rpx2px(100))
          })
      }
    })
    
    2022-11-06
    有用
    回复
登录 后发表内容