canvas在手机端模糊的处理

最新推荐文章于 2024-06-19 22:15:00 发布

我曾是宅男

最新推荐文章于 2024-06-19 22:15:00 发布

阅读量1.7k

点赞数 1

文章标签： canvas

本文链接：https://blog.csdn.net/u014765517/article/details/88362760

版权

在使用canvas绘制趋势图时，发现从模拟器到手机显示变得模糊。原因是canvas尺寸与设备像素不匹配，导致拉伸。通过确保canvas画图像素与设备像素1:1对应，可以避免模糊。解决方案包括调整canvas大小和比例，使得画图区域的像素与设备像素一致，从而实现清晰显示。

摘要由CSDN通过智能技术生成

最近在做项目时用到了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元/天解锁文章

我曾是宅男

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
canvas在手机端模糊的处理

最近在做项目时用到了canvas做趋势图，结果画出来的趋势图在模拟器上是清晰的，但放到手机上却是非常模糊。所以在网上收集了资料，因为设备像素和css像素不一致，而我们用canvas画图用的是css像素，导致在手机上显示时，canvas被拉伸了，所以导致了canvas的模糊。对于这种情况，我们只要保证用canvas画图时用的像素和设备像素之间的对应关系为1:1，那么，在手机上显示时就不会出现拉伸的情...
复制链接

扫一扫