Canvas 宽度高度为小数导致模糊的解决方法

当 window.devicePixelRatio 为 1 时，canvas 宽度高度为小数会导致出现模糊的问题，这是因为浏览器在绘制 canvas 时会进行缩放，而小数会导致缩放时出现模糊。为了解决这个问题，可以在 canvas 的宽度高度值上进行四舍五入或向上取整，来保证 canvas 的宽高为整数。

例如：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const ratio = window.devicePixelRatio || 1;
canvas.width = Math.round(300 * ratio);
canvas.height = Math.round(150 * ratio);
ctx.scale(ratio, ratio);

在上面的代码中，我们先获取了设备像素比，然后将 canvas 的宽度高度值进行四舍五入，最后使用 ctx.scale() 方法对 canvas 进行缩放，以保证 canvas 的清晰度。