解决小程序canvas高清屏模糊问题

最新推荐文章于 2024-05-28 10:44:06 发布

从此不问红尘

最新推荐文章于 2024-05-28 10:44:06 发布

阅读量4.4k

点赞数 2

文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/loney_man/article/details/119869017

版权

本文介绍了canvas在高dpi设备上显示模糊的原因，并提供了解决方案。关键在于理解canvas的画布尺寸和渲染尺寸的区别，通过调整画布尺寸为渲染尺寸的设备像素比倍数，然后进行缩放，可以确保在高清屏幕上清晰显示。代码示例展示了如何根据设备像素比计算并设置canvas的尺寸，从而实现高清适配。

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

原因

因为 canvas 不是矢量图，而是像图片一样属于位图。高 dpi 显示设备意味着每平方英寸有更多的像素，比如说二倍屏，手机就会以2个像素点的宽度来渲染一个像素，该 canvas 在屏幕中相当于占据了2倍的空间，相当于绘制的元素被放大了一倍，因此绘制出来的图片文字等会变模糊。

解决方案思路

首先要明确一点，canvas分为画布尺寸和渲染尺寸。渲染尺寸就是在css样式文件里设置的width、height大小，而画布尺寸则是在canvas标签里设置的width和height，比如< canvas id=‘canvas’ width=“200” height=“200” />。
明确了什么是画布尺寸，什么是渲染尺寸。那么解决canvas在高清屏模糊的问题就很简单了，只需要将canvas的画布尺寸扩大到渲染尺寸的设备像素比倍，然后再缩放到渲染尺寸显示即可。举个例子，假如一个canvas的实际渲染尺寸大小为200x200px，那么在iPhone x手机DPR为3的情况下canvas的画布尺寸则为600*600，canvas绘制完毕后再缩放3倍显示即可。