canvas在浏览器缩放后模糊怎么办？

最新推荐文章于 2024-10-31 07:41:07 发布

原创最新推荐文章于 2024-10-31 07:41:07 发布

· 1.5k 阅读

3 ·

版权

文章标签：

#canvas #html5

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何通过获取window.devicePixelRatio并调整canvas样式，确保在不同设备上以清晰方式显示canvas元素，从而解决画布分辨率问题。通过设置canvas的style.width和style.height为实际像素宽度和高度除以devicePixelRatio的值，可以实现高DPI屏幕的适配。

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

<canvas id="app"  width="1000" height="500"></canvas>

let canvas = document.getElementById("app"),
    ctx = canvas.getContext("2d"),
    scale = window.devicePixelRatio,
    canvas.style.width = canvas.width / scale + 'px';
    canvas.style.height = canvas.height / scale + 'px';

如此便能解决问题，有用收藏点赞哟~