微信小游戏-Canvas绘制问题（持续更新 2019年5月7日）

1、文字绘制模糊问题。

canvas绘制字体模糊的主要原因在于像素比。比如小米MIX3，393*851实际屏幕大小，2340*1080的分辨率，2.75的像素比。

默认canvas画布大小与绘制大小都为393*851，所以需要将画布大小调整到2340*1080

    //canvas和window对象由weapp-adapter.js提供(官方提供的适配器)
    canvas.style.width = window.innerWidth//获取屏幕实际宽度
    canvas.style.height = window.innerHeight//获取屏幕实际高度
    canvas.width = window.innerWidth * window.devicePixelRatio//真实的像素宽度
    canvas.height = window.innerHeight * window.devicePixelRatio//真实的像素高度
    
    this.ctx = canvas.getContext("2d")//绘图的环境
    
    //在(100,100)的位置绘制“Test”（绘制对象左下角为定位点）
    this.ctx.fillText("Test",100 * window.devicePixelRatio, 100 * window.devicePixelRatio)
复制代码

1、接触离屏画布。

用于提升性能(理论，未经测试)。

多个canvas进行分层绘制。

屏离canvas绘制好后，再一次性绘制整个屏离canvas，避免多次调用主屏canvas绘制。

转载于:https://juejin.im/post/5cd1549ce51d453adf1fa701