小程序画布的新接口,很多函数用不了,在真机调试显示空白?
发布于 5 年前 作者 qliang 13139 次浏览 来自 官方Issues
Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options{
    let _this = this
    const query = wx.createSelectorQuery()
    query.select('#canvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)

        // 初始化数据
        let canvasWidth = res[0].width;
        let canvasHeight = res[0].height;

        // 背景
        let backgroundImageSrc = "./poster.jpg";
        let backgroundImageX = 0;
        let backgroundImageY = 0;
        let backgroundImageW = canvasWidth;
        let backgroundImageH = canvasHeight;

        // 头像
        let avatarSrc = "./avatar.png";
        let avatarX = 15;
        let avatarY = 15;
        let avatarW = 70;
        let avatarH = 70;

        // 名字
        let nameX = avatarX + avatarW + 10;
        let nameY = avatarY;

        // 开始绘制背景
        const backgroundImage = canvas.createImage()
        backgroundImage.src = backgroundImageSrc
        backgroundImage.onload = () => {
          ctx.drawImage(backgroundImage, backgroundImageX, backgroundImageY, backgroundImageW, backgroundImageH)
          ctx.restore()
          console.log("绘制背景完成")

          const avatar = canvas.createImage()
          avatar.src = avatarSrc
          avatar.onload = (res) => {
            ctx.arc(50503502 * Math.PI)
            ctx.clip()
            ctx.drawImage(avatar, avatarX, avatarY, avatarW, avatarH)
            ctx.restore()
            console.log("绘制头像完成")
          }

          ctx.setFillStyle("#f49c29")
          ctx.setFontSize(50)

          // 绘制文字
          const metrics = ctx.measureText('Hello World')
          console.log(metrics.width)
          ctx.strokeText('姓名', nameX, nameY)
          ctx.strokeText('科目'100100)
          ctx.strokeText('大学'100100)
          ctx.strokeText('内容'100100)
          ctx.strokeText('长按识别查看动态'100150)
          console.log("绘制文字完成")

          ctx.draw(trueres => {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: 1080,
              height: 1920,
              destWidth: 1080,
              destHeight: 1920,
              canvasId: "canvas",
              success: res => {
                console.log(res)
                _this.setData({
                  posterSrc: res.tempFilePath
                })
              },
              fail: res => {
                console.log("错误")
              }
            })
          })

        }
      })
  }
})

请大佬们帮忙看看,感谢~~

手机:小米9pro

微信版本:7.0.17

1 回复

真机上提示这样的错误

回到顶部