微信小游戏canvas抗锯齿

最新推荐文章于 2025-10-25 20:50:34 发布

原创最新推荐文章于 2025-10-25 20:50:34 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用微信开发者工具获取设备屏幕尺寸，并据此调整canvas画布大小的方法。通过调用wx.getSystemInfoSync()同步获取窗口宽度和高度，然后设置canvas的宽高样式及实际尺寸，并应用设备像素比进行缩放。

这里写图片描述

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);

这里写图片描述

8 条评论

东丶起 2022.11.16
请问 threejs如何抗锯齿呢 this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true, }); 这样写没效果

xiefeisd 2019.02.16
请问那个ctx是什么？
- SakuraLJ回复xiefeisd 2019.02.20
  [reply]xiefeisd[/reply] ctx = canvas.getContext(xxxxxx)

唯夜 2019.01.09
好使，加上就没毛病了。

梁温柔 2018.11.29
[code=javascript] canvas.width = canvas.width * window.devicePixelRatio canvas.height = canvas.height * window.devicePixelRatio context.scale(window.devicePixelRatio, window.devicePixelRatio) [/code] 不是很懂你上面的width+‘’px，而且这个WH是拿谁的呢，我的是这样写就抗锯齿了，但是所有getimgdata和putimgdata都需要重新给距离。不知道你上面的效果是怎么样的
- SakuraLJ回复梁温柔 2018.12.29
  [reply]weixin_41547118[/reply] let sysInfo = wx.getSystemInfoSync(),width =sysInfo.windowWidth,height =sysInfo.windowHeight;

梁温柔 2018.11.29
width is not defined。请问具体是怎么操作呢
- SakuraLJ回复梁温柔 2018.12.29
  [reply]weixin_41547118[/reply] let sysInfo = wx.getSystemInfoSync(),width =sysInfo.windowWidth,height =sysInfo.windowHeight;