小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- 需求的场景描述(希望解决的问题)
显示一些精致的游戏画面
- 希望提供的能力
像原生的HTML5一样提供
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >
<meta name="viewport" content="width=750, target-densitydpi=device-dpi">
这些自定义屏幕显示配置
7 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
解决了,不要用离屏画布,直接设置上屏画布的canvas.width为实际像素宽度,比如
var cw = wx.getSystemInfoSync().screenWidth;
var ch = wx.getSystemInfoSync().screenHeight;
canvas.width = 750;
canvas.height = Math.ceil(ch / cw * canvas.width);
然后根据这个像素绘制图片就可以了,小游戏会自动把上屏画布的显示尺寸改成屏幕尺寸的,原理跟原生的canvas标签的原来是一样的,比如
<canvas width="750" height="1334" style="width:375px;height:667px;"></canvas>
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
我试了,画面区域就缩小了一半, 用微信浏览也是一样,所以 canvas.width = 750; 这个值是怎么得出的?
微信官方出的游戏,画面就挺好,不知道他们用了什么方法,难道要用WebGL ??
没有,用了白开水建议的方法,画面有所改善,但是画面还是有点模糊
好的,谢谢回答,顺便问一下,为什么小程序不直接支持开发游戏,感觉现在的小游戏限制太多,比如没有view,实现一些页面效果时非常麻烦
可以将游戏内容先根据 devicePixelRatio 的倍数绘制到离屏画布上,再将该离屏画布上屏
具体信息可以在网络上搜索资料【Canvas 高清 绘制】
你好,你的反馈我们已收到,我们会在后续的版本中考虑增加类似功能。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
解决了,不要用离屏画布,直接设置上屏画布的canvas.width为实际像素宽度,比如
var cw = wx.getSystemInfoSync().screenWidth;
var ch = wx.getSystemInfoSync().screenHeight;
canvas.width = 750;
canvas.height = Math.ceil(ch / cw * canvas.width);
然后根据这个像素绘制图片就可以了,小游戏会自动把上屏画布的显示尺寸改成屏幕尺寸的,原理跟原生的canvas标签的原来是一样的,比如
<canvas width="750" height="1334" style="width:375px;height:667px;"></canvas>
我试了,画面区域就缩小了一半, 用微信浏览也是一样,所以 canvas.width = 750; 这个值是怎么得出的?
微信官方出的游戏,画面就挺好,不知道他们用了什么方法,难道要用WebGL ??
没有,用了白开水建议的方法,画面有所改善,但是画面还是有点模糊
小游戏离屏画布上图片或文字模糊的问题,楼主搞定了吗,是否可以分享下代码
好的,谢谢回答,顺便问一下,为什么小程序不直接支持开发游戏,感觉现在的小游戏限制太多,比如没有view,实现一些页面效果时非常麻烦
可以将游戏内容先根据 devicePixelRatio 的倍数绘制到离屏画布上,再将该离屏画布上屏
具体信息可以在网络上搜索资料【Canvas 高清 绘制】
你好,你的反馈我们已收到,我们会在后续的版本中考虑增加类似功能。