微信小游戏-Canvas绘制问题(持续更新 2019年5月7日)

博客主要讨论了canvas在游戏开发中的两个问题。一是文字绘制模糊问题,其主因是像素比,需调整画布大小;二是接触离屏画布,可提升性能,采用多个canvas分层绘制,绘制好离屏canvas后再一次性绘制到主屏,避免多次调用主屏绘制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、文字绘制模糊问题。

canvas绘制字体模糊的主要原因在于像素比。比如小米MIX3,393*851实际屏幕大小,2340*1080的分辨率,2.75的像素比。

默认canvas画布大小与绘制大小都为393*851,所以需要将画布大小调整到2340*1080

    //canvas和window对象由weapp-adapter.js提供(官方提供的适配器)
    canvas.style.width = window.innerWidth//获取屏幕实际宽度
    canvas.style.height = window.innerHeight//获取屏幕实际高度
    canvas.width = window.innerWidth * window.devicePixelRatio//真实的像素宽度
    canvas.height = window.innerHeight * window.devicePixelRatio//真实的像素高度
    
    this.ctx = canvas.getContext("2d")//绘图的环境
    
    //在(100,100)的位置绘制“Test”(绘制对象左下角为定位点)
    this.ctx.fillText("Test",100 * window.devicePixelRatio, 100 * window.devicePixelRatio)
复制代码

1、接触离屏画布。

用于提升性能(理论,未经测试)。

多个canvas进行分层绘制。

屏离canvas绘制好后,再一次性绘制整个屏离canvas,避免多次调用主屏canvas绘制。

转载于:https://juejin.im/post/5cd1549ce51d453adf1fa701

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值