微信小游戏为何fillText绘制的文字是模糊的？

新冠防疫隔离在家，无聊得紧，就写写微信小游戏来玩。

开始发现字体是模糊的，图片也比较模糊。

查了官方文档，微信官方说调整了canvas的缩放策略，它把物理像素和逻辑像素自动做了缩放，使我们不用考虑pixelRatio，因此字体和图片都模糊了，如果要显示高清，就要自己处理了。

官方说明如下：

https://developers.weixin.qq.com/community/develop/doc/00040c9903023848e0d7bd6205a401?highLine=%25E6%2596%2587%25E5%25AD%2597%25E6%25A8%25A1%25E7%25B3%258A

要处理高清，就要把canvas的大小乘以pixelRatio倍，如：

let sysInfo = wx.getSystemInfoSync();
canvas.width = sysInfo.screenWidth * sysInfo.pixelRatio;
canvas.height = sysInfo.screenHeight * sysInfo.pixelRatio;

同时，原来的fillRect，lineTo，moveTo......等等函数，位置大小都要乘以pixelRatio倍。为了简化修改，试了一下hook override，写一个文件wxhHook.js，把这些函数一次修改掉：

/*** 画布缩放，只有sysInfo.pixelRatio扩大画布，贴图和文字才会清晰，但是离屏画布复制到前景时变慢很多。*///如果要扩大画布(高清)，注释掉这一行
//wx.tmGlobal.sysInfo.pixelRatio = 1;wx.tmGlobal.canvas.width = wx.tmGlobal.sysInfo.screenWidth * wx.tmGlobal.sysInfo.pixelRatio;
wx.tmGlobal.canvas.height = wx.tmGlobal.sysInfo.screenHeight * wx.tmGlobal.sysInfo.pixelRatio;wx.tmGlobal.canvas_bkg.width = wx.tmGlobal.sysInfo.screenWidth * wx.tmGlobal.sysInfo.pixelRatio;
wx.tmGlobal.canvas_bkg.height = wx.tmGlobal.sysInfo.screenHeight * wx.tmGlobal.sysInfo.pixelRatio;wx.tmGlobal.canvas_qipan.width = wx.tmGlobal.sysInfo.screenWidth * wx.tmGlobal.sysInfo.pixelRatio;
wx.tmGlobal.canvas_qipan.height = wx.tmGlobal.sysInfo.screenHeight * wx.tmGlobal.sysInfo.pixelRatio;wx.tmGlobal.canvas_score.width = wx.tmGlobal.sysInfo.screenWidth * wx.tmGlobal.sysInfo.pixelRatio;
wx.tmGlobal.canvas_score.height = wx.tmGlobal.sysInfo.screenHeight * wx.tmGlobal.sysInfo.pixelRatio;let CanvasRenderingContext2D = wx.tmGlobal.context.constructor;CanvasRenderingContext2D.prototype._moveTo=CanvasRenderingContext2D.prototype.moveTo;
CanvasRenderingContext2D.prototype.moveTo = function (x, y) {return CanvasRenderingContext2D.prototype._moveTo.call(this,x * wx.tmGlobal.sysInfo.pixelRatio,y * wx.tmGlobal.sysInfo.pixelRatio);
}CanvasRenderingContext2D.prototype._lineTo = CanvasRenderingContext2D.prototype.lineTo;
CanvasRenderingContext2D.prototype.lineTo = function (x, y) {return CanvasRenderingContext2D.prototype._lineTo.call(this,x * wx.tmGlobal.sysInfo.pixelRatio,y * wx.tmGlobal.sysInfo.pixelRatio);
}CanvasRenderingContext2D.prototype._strokeRect = CanvasRenderingContext2D.prototype.strokeRect;
CanvasRenderingContext2D.prototype.strokeRect = function (x, y, w, h) {return CanvasRenderingContext2D.prototype._strokeRect.call(this,x * wx.tmGlobal.sysInfo.pixelRatio,y * wx.tmGlobal.sysInfo.pixelRatio,w * wx.tmGlobal.sysInfo.pixelRatio,h * wx.tmGlobal.sysInfo.pixelRatio);
};CanvasRenderingContext2D.prototype._fillRect = CanvasRenderingContext2D.prototype.fillRect;
CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h) {return CanvasRenderingContext2D.prototype._fillRect.call(this,x * wx.tmGlobal.sysInfo.pixelRatio,y * wx.tmGlobal.sysInfo.pixelRatio,w * wx.tmGlobal.sysInfo.pixelRatio,h * wx.tmGlobal.sysInfo.pixelRatio);
};CanvasRenderingContext2D.prototype._rect = CanvasRenderingContext2D.prototype.rect;
CanvasRenderingContext2D.prototype.rect = function (x, y, w, h) {return CanvasRenderingContext2D.prototype._rect.call(this,x * wx.tmGlobal.sysInfo.pixelRatio,y * wx.tmGlobal.sysInfo.pixelRatio,w * wx.tmGlobal.sysInfo.pixelRatio,h * wx.tmGlobal.sysInfo.pixelRatio);
};CanvasRenderingContext2D.prototype._clearRect = CanvasRenderingContext2D.prototype.clearRect;
CanvasRenderingContext2D.prototype.clearRect = function (x, y, w, h) {return CanvasRenderingContext2D.prototype._clearRect.call(this,x * wx.tmGlobal.sysInfo.pixelRatio,y * wx.tmGlobal.sysInfo.pixelRatio,w * wx.tmGlobal.sysInfo.pixelRatio,h * wx.tmGlobal.sysInfo.pixelRatio);
};//img整图缩放绘制，如果是从img扣去部分来绘制，请使用_drawImage,并把sx,sy,sw,sh也乘以pixelRatio
CanvasRenderingContext2D.prototype._drawImage = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function (img) {//console.log(arguments);let params = new Array(9);if (arguments.length == 3) {params[0] = arguments[0];        //imgparams[1] = 0;                   //sxparams[2] = 0;                   //syparams[3] = arguments[0].width;  //swparams[4] = arguments[0].height; //shparams[5] = arguments[1];        //dxparams[6] = arguments[2];        //dyparams[7] = arguments[0].width;  //dwparams[8] = arguments[0].height; //dh}else if (arguments.length == 5) {params[0] = arguments[0];        //imgparams[1] = 0;                   //sxparams[2] = 0;                   //syparams[3] = arguments[0].width;  //swparams[4] = arguments[0].height; //shparams[5] = arguments[1];        //dxparams[6] = arguments[2];        //dyparams[7] = arguments[3];        //dwparams[8] = arguments[4];        //dh}else params = arguments;for (let i = 5; i < params.length; i++) {params[i] = params[i] * wx.tmGlobal.sysInfo.pixelRatio;}//console.log(params);return CanvasRenderingContext2D.prototype._drawImage.apply(this, params);
};CanvasRenderingContext2D.prototype._fillText = CanvasRenderingContext2D.prototype.fillText;
CanvasRenderingContext2D.prototype.fillText = function (s, x, y) {return CanvasRenderingContext2D.prototype._fillText.call(this,s, x * wx.tmGlobal.sysInfo.pixelRatio,y * wx.tmGlobal.sysInfo.pixelRatio);
}CanvasRenderingContext2D.prototype._createImageData = CanvasRenderingContext2D.prototype.createImageData;
CanvasRenderingContext2D.prototype.createImageData = function (w, h) {return CanvasRenderingContext2D.prototype._createImageData.call(this,w * wx.tmGlobal.sysInfo.pixelRatio, h * wx.tmGlobal.sysInfo.pixelRatio);
}CanvasRenderingContext2D.prototype._getImageData = CanvasRenderingContext2D.prototype.getImageData;
CanvasRenderingContext2D.prototype.getImageData = function (x, y, w, h) {return CanvasRenderingContext2D.prototype._getImageData.call(this,x * wx.tmGlobal.sysInfo.pixelRatio,y * wx.tmGlobal.sysInfo.pixelRatio,w * wx.tmGlobal.sysInfo.pixelRatio,h * wx.tmGlobal.sysInfo.pixelRatio);
}CanvasRenderingContext2D.prototype._putImageData = CanvasRenderingContext2D.prototype.putImageData;
CanvasRenderingContext2D.prototype.putImageData = function (data, x, y) {return CanvasRenderingContext2D.prototype._putImageData.call(this, data,x * wx.tmGlobal.sysInfo.pixelRatio, y * wx.tmGlobal.sysInfo.pixelRatio);
}

保留了原函数，前面加了一个下划线，特殊需要调用地方使用原函数，如画布复制：

function updateCanvas(){//没有clearRect，感觉画面偶尔会闪一下wx.tmGlobal.context._clearRect(0, 0, wx.tmGlobal.canvas.width, wx.tmGlobal.canvas.height);if (wx.tmGlobal.context_bkg != wx.tmGlobal.context){//复制画布，用旧的不考虑pixelRatio的函数画wx.tmGlobal.context._drawImage(wx.tmGlobal.canvas_bkg,0,0);}
}

其它要注意的是字体，需要修改，如：

//const g_scoreFont = "14px Arial";
const g_scoreFont = 14 * wx.tmGlobal.sysInfo.pixelRatio+"px Arial";

微信小游戏为何fillText绘制的文字是模糊的？相关推荐

LayaAirIDE实现微信小游戏排行榜绘制（开放数据域）
看这篇文章的前提是你 1.已经在微信Web开发者平台里使用wx.setUserCloudStorage接口把自己的数据存储到微信提供的服务器上, 2.并且已经通过wx.getFriendCloudSt ...
LayaAir 绘制微信小游戏开放数据域画面
LayaAir 绘制微信小游戏开放数据域画面请大家关注我的微博:@NormanLin_BadPixel坏像素之前写过用cocosCreator绘制微信小游戏子域的教程,保持整体思路不变,现在再写一 ...
微信小游戏——贪吃蛇
博客简介本篇博客介绍的是微信小游戏贪吃蛇的案例,详细的开发过程,并且提供代码压缩包下载. 案例简介布局构建对象响应事件蛇头对象的移动蛇身的移动食物刷新绘制得分碰撞检验开始界面和结束 ...
微信小游戏入门案例——拼图游戏
微信小游戏入门案例--拼图游戏涉及内容:canvas组件.小程序界面绘图API 目录结构: pages\game\game.js // pages/game/game.js // 方块的初始位置 v ...
利用Phaser开发微信小游戏（排行榜小结）
利用Phaser开发微信小游戏(排行榜小结) 小游戏中的开放数据域可用来保存游戏 ...
Egret白鹭引擎开发微信小游戏之保存图片到相册
玩家在玩小游戏的过程中,很多时候想要保存一下当前的截图.或者保存游戏内精美的画面到相册,一方面是为了记录在游戏中的美好时刻,另一方面则是能够更好地和朋友们分享我在这游戏中获得的荣耀和快乐,因为我们就会 ...
学习微信小游戏（一）
1.项目目录 1)audio:用于存放音频 2)images:用于存放图片 3)js:用于存放我们编写的js文件 a.symbol.js: b.weapp-adapter.js: 4)game.js: ...
微信小游戏制作学习笔记
微信小游戏制作学习笔记关于 cocos 的学习笔记文字图像部分: ***1.***图集资源由png和plist文件组成接下来可以使用专门的软件生成图集,我们推荐的图集制作软件包括:[Zwopte ...
用微信小游戏实现龙舟大战-打粽子
用微信小游戏实现龙舟大战-打粽子端午节来啦!各位c粉有没有吃粽子啊! 前言端午节来啦!今天沉默带大家来做个关于端午节的小游戏,我的设计思路是用龙舟打粽子,类似于飞机大战,只不过我们的场景是在河中. ...

微信小游戏为何fillText绘制的文字是模糊的？

微信小游戏为何fillText绘制的文字是模糊的？相关推荐

最新文章

热门文章