微信小游戏为何fillText绘制的文字是模糊的？
2024-06-30 19:45:04
新冠防疫隔离在家，无聊得紧，就写写微信小游戏来玩。
开始发现字体是模糊的，图片也比较模糊。
查了官方文档，微信官方说调整了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粉有没有吃粽子啊! 前言 端午节来啦!今天沉默带大家来做个关于端午节的小游戏,我的设计思路是用龙舟打粽子,类似于飞机大战,只不过我们的场景是在河中. ...
最新文章
- UA MATH566 统计理论8 置信区间简介
- AspNet Core 6.0 Json写默认首字母小写（camelCase）问题
- 第1章 Express MongoDB 搭建多人博客
- linux ext2 文件系统学习
- 群晖系统设定定时NTP同步时间
- 台式计算机配置单,最新台式电脑组装配置推荐
- 第七十五章 SQL命令 START TRANSACTION
- IP Catalog与Create Block Design调用软核的不同
- 示例：父子关系(Parent Child Relationships)
- 采购订单中带账户分配的总账科目确定（M和E的区别）
- 基于MDK-KILE5.23版本的STM32创建工程
- 读论文：Fine-grained Image Classification via Combining Vision and Language
- 软件工程作业一：从产品经理人角度分析微信求职招聘小程序
- 《微信》医保支付功能介绍
- ASP.NET Core WebApi构建API接口服务实战演练
- 洛谷八连测——关于取模与思维僵化
- dota2游戏心得
- 字符串逆序输出c语言,5、输入一个字符串，对该字符串进行逆序，输出逆序后的字符串。...
- jq将数据库数据显示在select标签上
- Vue 设置背景图片样式