收藏
回答

再发一遍,上一个帖子沉了2天没人回答,微信小游戏Canvas问题

注意我说的是小游戏下的上屏Canvas,

我用Canvas中加载外部图片,图片根据设备屏幕需要适配缩放,

要么调用Canvas绘图上下文ctx.scale(计算好的倍率,计算好的倍率),要么:

ctx.drawImage(this._IMG, 50,80, this._IMG.width/ 计算好的倍率 , this._IMG.height/ 计算好的倍率);


但这两种方式使用后,都导致了图片失真,锯齿敢很强,从小游戏Demo中飞机大战那个,背景就是用方法2处理的,存在模糊感,不过画面连续在动,且内容丰富,并不会被人注意,如果是问题,明显就虚了,再看看 欢乐坦克大战,就没有锯齿感,请问,正确的实现方式是怎么做的。



不要跟我说,我例图中,虚是因为左边的比右边的大一点,

这两个图片都是设备适配后的,真实图片要比这两个缩放后的像素大一倍且高清,

左边的是调用Canvas加载的Img,右边的是 WXML直接<img>直接引入的,css控制适配。

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

7 个回答

  • 蜗牛
    蜗牛
    2018-10-26

    放大ratio倍后,ios正常了,安卓还是模糊

    2018-10-26
    有用 1
    回复
  • 🐂火星牛
    🐂火星牛
    2020-03-15

    let sysInfo = wx.getSystemInfoSync();

    //console.log("sysInfo:",sysInfo);

    let canvas = wx.createCanvas();

    //像素缩放

    canvas.width = sysInfo.screenWidth * sysInfo.pixelRatio;

    canvas.height = sysInfo.screenHeight * sysInfo.pixelRatio;

    如此一来,所有的位置,长宽,都要乘以sysInfo.pixelRatio了。

    2020-03-15
    有用
    回复
  • GaleLiu
    GaleLiu
    2018-09-27

    大哥,能贴点代码出来吗?

    2018-09-27
    有用
    回复
  • 🎃
    🎃
    2018-09-18

    Screen is not defined 提示Screen未定义呀

    2018-09-18
    有用
    回复 1
    • 刘先森
      刘先森
      2018-09-20

      let System = wx.getSystemInfoSync();

      2018-09-20
      回复
  • Alan
    Alan
    2018-09-16

    感谢!

    2018-09-16
    有用
    回复
  • 刘先森
    刘先森
    2018-05-06

    找到了,放大画布

    2018-05-06
    有用
    回复 11
    • x
      x
      2018-07-12

      你好,我也遇到了这种情况,请问放大画布指的是什么,能否详细说明

      2018-07-12
      回复
    • 刘先森
      刘先森
      2018-07-13回复x

      canvas.width  = Screen.width*2;

      canvas.height = Screen.height*2;

      2018-07-13
      回复
    • x
      x
      2018-07-13回复刘先森

      好的,非常感谢

      2018-07-13
      回复
    • 景锵。
      景锵。
      2018-07-25

      楼主,问下,小程序怎么获取canvas对象呢?

      2018-07-25
      回复
    • 刘先森
      刘先森
      2018-07-25回复景锵。

      let canvas = wx.createCanvas();


      2018-07-25
      回复
    查看更多(6)
  • 神经蛙
    神经蛙
    2018-05-04

    楼主该问题有找到合适的解决方案了吗

    2018-05-04
    有用
    回复 1
    • 刘先森
      刘先森
      2018-09-04

      canvas.width  = Screen.width*2;

      canvas.height = Screen.height*2;


      2018-09-04
      回复
登录 后发表内容