收藏
回答

微信小游戏canvas绘制文字,在真机显示模糊问题

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小游戏 Bug canvas 客户端 Android 6.6.6 2.0.9

使用微信小游戏canvas绘制文字,感觉是分辨率问题,进行了拉伸。模拟器的 在模拟器中显示很清晰,在真机显示模糊问题。

模拟器显示



真机显示

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

5 个回答

  • 谁叫你不改备注的
    谁叫你不改备注的
    2020-06-03

    作为大神的我 总喜欢去回复一些没有解决掉的帖子,

    100%能解决的

     ctx.font = '100px Arial';

            let tx = 100

            let ty = 100

            ctx.save();

            ctx.scale(.2, .2);

            ctx.fillText('mmp', tx*5, ty*5);

            

            ctx.restore()

    这段代码等同于

     ctx.font = '20px Arial';

            let tx = 20

            let ty = 20

            ctx.fillText('mmp', tx, ty);


    设置个大点的 然后同倍缩小 最终缩小后的是你想要的大小就行了 至于为什么 自己去了解window.devicePixelRatio

    知识点啊

    我总是这么优秀,哎

    2020-06-03
    有用 2
    回复
  • 梧桐
    梧桐
    04-22

    这个需要设置dpr,设置画布内部分辨率, 设置缩放匹配canvas内部分辨率和设备分辨率

    04-22
    有用
    回复
  • 后来居上
    后来居上
    2021-01-29

    以防万一,更新一个最简单的

    //获取用户设备信息,屏幕宽度

    tt.getSystemInfo({

    success: res => {

    console.log(res, 'getSystemInfo')

    that.setData({

    screenWidth: res.screenWidth,

    screenHeight: res.screenHeight,

    pixelRatio: res.pixelRatio,

    })

    console.log(that.data.pixelRatio, that.data.screenWidth, that.data.screenHeight)

    }

    })

    // 创建canvas

    wx.canvasToTempFilePath({

    canvasId: 'canvasId', // canvasId

    width: that.data.screenWidth, // 输出canvas画布的宽

    height: that.data.screenHeight, // 输出canvas画布的高

    destWidth: that.data.screenWidth * that.data.pixelRatio, // 输出canvas画布的宽 * 设备像素比

    destHeight: that.data.screenHeight * that.data.pixelRatio, // 输出canvas画布的高 * 设备像素比

    success: (res) => {

    console.log(res)

    },

    fail: (err) => {

    console.log(err)

    }

    })


    2021-01-29
    有用
    回复
  • 🐂火星牛
    🐂火星牛
    2020-03-08

    我也不知道原因

    2020-03-08
    有用
    回复
  • M.D.
    M.D.
    2018-06-12

    我也是这个问题....

    2018-06-12
    有用
    回复
登录 后发表内容