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

2,022 阅读1分钟

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)

2、接触离屏画布。

多个canvas进行分层绘制。

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