在使用canvas绘制趋势图时，发现从模拟器到手机显示变得模糊。原因是canvas尺寸与设备像素不匹配，导致拉伸。通过确保canvas画图像素与设备像素1:1对应，可以避免模糊。解决方案包括调整canvas大小和比例，使得画图区域的像素与设备像素一致，从而实现清晰显示。
最近在做项目时用到了canvas做趋势图，结果画出来的趋势图在模拟器上是清晰的，但放到手机上却是非常模糊。所以在网上收集了资料，因为设备像素和css像素不一致，而我们用canvas画图用的是css像素，导致在手机上显示时，canvas被拉伸了，所以导致了canvas的模糊。对于这种情况，我们只要保证用canvas画图时用的像素和设备像素之间的对应关系为1:1，那么，在手机上显示时就不会出现拉伸的情况，canvas就不会模糊了。
给出如下解决方案：
参考：https://www.cnblogs.com/joyho/articles/3557223.html
html：
<body>
<div id="root">
<canvas id="canvas" width="300" height="150"></canvas>
</div>
</body>
js：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var styleW = $(canvas).parent().width() * 0.96;
var styleH = st
最低0.47元/天 解锁文章
扫一扫
2269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
