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绘制。