在最近的工作中，您需要使用帆布绘制图形。起初，开发时的效果非常好，但是页面放在电话上后立即变得模糊了吗？这是什么？还有什么？
上面的两个圆圈由左侧的画布和右侧的CS绘制。可以清楚地看出，画布绘制的圆圈特别模糊。
代码显示如下：
首先，我需要了解属性屏幕像素比。
在出现高定义显示之前，例如1000px的屏幕宽度，宽度上的物理像素也为1000px。出现高定义屏幕后，屏幕宽度为1000px，物理像素可能达到2000px或更高。
为了促进物理像素和屏幕像素的比率，将属性添加到窗口对象中以表示该比率。
例如，在设备2的设备上，当我们使用CSS绘制1PX线时，为了确保绘图的大小，物理像素实际上使用2PX绘制此行，并且此转换由浏览器自动处理，因此对于开发人员来说，SOIT并不是很多麻烦。
然后，由于上面提到的是浏览器将在渲染时自动处理像素比的问题，因此CSS绘制的图像在转换后不会模糊，但是它如何出现在画布上？
因为在画布标签上定义的值未转换，因此将100px渲染为100px物理像素，但该设备需要200px。在此要求的时间上，这就是为什么画布绘制的图片变得模糊的原因。
这是根据解决方案的上述示例的效果：