更正：

原文是基于微信小游戏，在微信开发者工具、手机端微信小游戏，该方案没问题。

我今天尝试移植到普通web，该方案出现新问题：

1）不使用该方案，则出现锯齿。

2）使用该方案，则正圆变成椭圆。

暂时解决不了。

说明

我原先的尝试是错误的，正确的方法见这位大牛的博客：https://blog.csdn.net/sakurallj/article/details/80263494#comments

这位大牛的方法是对的，具体细节并不适合我的情况，可能是我太菜了的缘故。

使用该方法，修改了一下具体写法，完美解决了我的问题。

正确方法见后文。错误的尝试过程也保留备忘。

错误的尝试

微信小游戏在真机调试时出现锯齿，网上搜索了很多解决方案，其中包括CSDN的博客两篇。

也许是因为我水平有限，对众多解决方案的理解不够深入，总之结果是照葫芦画瓢的尝试没有成功。

经过自己摸索，发现解决方案如下：

对于three.js，使用如下语句：

var renderer = new THREE.WebGLRenderer({canvas:canvas,antialias:true,precision:"highp"})
renderer.setSize(window.innerWidth*8, window.innerHeight*8)

对于babylon.js，使用如下语句：

var engine = new BABYLON.Engine(canvas, true);
engine.setSize(window.innerWidth*16, window.innerHeight*16);

总结：网上的各解决方案对问题出现的原因分析的是对的，思路也是对的，就是通过放大实际绘制的绘图尺寸，但是提供的具体命令不可行。

修改尺寸的时候，也不能按照真机的dpr乘以倍数，就简单粗暴直接乘以一个较大的数。我用的小米8，three乘以8，babylon乘以16，能获得较好的效果。

大牛的方法

大牛介绍的方法：

let sysInfo = wx.getSystemInfoSync(),width  =sysInfo.windowWidth,height  =sysInfo.windowHeight;canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * window.devicePixelRatio;
canvas.width = width * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
---------------------
作者：SakuraLJ
来源：CSDN
原文：https://blog.csdn.net/sakurallj/article/details/80263494
版权声明：本文为博主原创文章，转载请附上博文链接！

我的问题：

ctx是什么鬼？我还留言问了大牛，得到回复之前自己瞎摸索，便有了前面的错误尝试。

正确的方法

大牛回复说ctx = canvas.getContext(xxxxxx)，但微信小游戏不允许在html中添加canvas元素，不能这么用。

使用three.js的方法修改渲染器的尺寸，问题解决。代码如下：

//屏幕尺寸
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var devicePixelRatio = window.devicePixelRatio;//抗锯齿
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.width = screenWidth * devicePixelRatio;
canvas.height = screenHeight * devicePixelRatio;
renderer.setSize(screenWidth * devicePixelRatio, screenHeight * devicePixelRatio);

在真机上效果很完美。

新问题：这样虽然解决了真机的问题，但是在模拟机又出现了锯齿。

判断设备种类

针对上述解决了真机锯齿，模拟机又出现问题的情况，另一位大牛给出了解决方案：https://www.cnblogs.com/web-leader/p/6877361.html，思路是，根据终端设备的类型决定要不要运行抗锯齿代码。

但是由于微信开发工具的手机模拟器会被识别成手机，因此需要增加对运行平台的识别。完整代码如下：

//屏幕尺寸
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var devicePixelRatio = window.devicePixelRatio;//判断平台
function isDevtools() {return "devtools" == navigator.platform;
}// 判断设备种类
function isPhone() {var userAgentInfo = navigator.userAgent;var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];for (var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {return true;}}return false;
}if ( !isDevtools() && isPhone() ) {//抗锯齿canvas.style.width = screenWidth + "px";canvas.style.height = screenHeight + "px";canvas.width = screenWidth * devicePixelRatio;canvas.height = screenHeight * devicePixelRatio;renderer.setSize(screenWidth * devicePixelRatio, screenHeight * devicePixelRatio);
}

这段代码完美解决了微信小游戏开发工具模拟器、手机真机的锯齿问题。

但素，又双叒叕有新问题了：

我使用本地浏览器调试代码，之后再移植到微信。（微信开发工具的调试功能太难用）

这段代码，使用浏览器访问时，还是有锯齿。

Three.js的问题

经过以上工作，仍然有锯齿，不是canvas的问题，是three.js的问题。通过 WebGLRenderer 的 antialias:true 选项可以解决：

var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias:true });

微信小游戏、three.js、真机调试，出现锯齿的解决办法相关推荐

微信小程序开发者工具真机调试和预览连接本地服务器
微信小程序开发者工具真机调试连接本地服务器网上参考了很多方法只有这个方法能解决本地服务器在微信开发者工具预览或者真机调试的连接,话不多说看图. 第一步 win+R,CMD输入ipconfig查看本地 ...
uniapp微信小程序开发者工具-真机调试报错：message:Error: /XXX.bak.js does not exists
多次遇到类似的报错,比如: message:Error: components/common/loginDialog.bak.js does not exists 如图: 解决办法: 删除 unpac ...
解决微信小程序MQTT通讯真机调试失败的问题附加可用代码
原因:模拟器上测试可以,选中了不校验合法域名,真机调试没能连接服务器,解决思路换了个mqtt.js 可参考 https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js ...
微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...
微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序真机调试请求失败的解决
微信小程序在电脑上一切正常,请求成功,但是在真机调试上请求失败,报错,是因为电脑和手机内网ip不同的问题把请求地址改为本机局域网ip地址,手机和电脑连同一个局域网,就不会报错了如果手机上还是获取不 ...
Unity转微信小游戏与JS交互
微信小游戏JS交互方式: 微信小游戏机制问题,在微信小游戏中不会加载index.html,所以写在index.html的函数均不会被调用到 1.自行创建calljs.js文件中添加定义,每次编译该文件 ...
Xcode 真机调试 ineligible Devices的解决方法
如上图所示,在Xcode真机调试的时候,连接手机却发现不能选择自己设备. 解决办法: 对勾选择自己的设备.
php 发送微信请求失败的原因,微信小程序模拟正常真机服务器请求出错
微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考: 本地看不到数据,就先让本地能看到数据,再看本帖.... 1: ...
微信小程序showToast在真机中显示时间不可控制，显示时间短
现象: 使用uniapp开发微信小程序,使用showToast,设置duration来控制提示展现时长,发现在微信开发者工具正常,在真机中显示时间比较短,并且设置duration不生效. 原因: 排查 ...

微信小游戏、three.js、真机调试，出现锯齿的解决办法

更正：

说明