canvas宽高为小数时如何控制css的大小来使像素点对齐使字体显示清晰如何根据设备像素比计算出最终的canvas宽高和css的宽高

1. 控制 CSS 大小使像素点对齐

如果 canvas 的宽高为小数，可以使用 Math.floor() 方法将其转换为整数，然后再设置 canvas 的宽高。同时，将 canvas 的 CSS 大小设置为与 canvas 实际大小相同的整数值，这样可以保证像素点对齐。

例如，如果 canvas 的实际宽度为 300.5 像素，可以将其转换为 300 像素，然后将 CSS 宽度设置为 300 像素。

2. 使字体显示清晰

为了使字体显示清晰，可以设置 canvas 的 imageSmoothingEnabled 属性为 false，这样可以禁用默认的图像平滑处理，从而获得更清晰的字体显示效果。

例如：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;

3. 计算最终的 canvas 宽高和 CSS 的宽高

计算最终的 canvas 宽高和 CSS 的宽高需要考虑设备像素比（devicePixelRatio）。设备像素比是设备物理像素和设备独立像素的比值，可以通过 window.devicePixelRatio 属性获取。

例如，如果希望将 canvas 的实际宽度设置为 300 像素，可以根据设备像素比计算出最终的 canvas 宽度和 CSS 宽度：

const dpr = window.devicePixelRatio || 1;
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const canvasWidth = 300 * dpr;
const canvasHeight = 200 * dpr;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.style.width = `${canvasWidth / dpr}px`;
canvas.style.height = `${canvasHeight / dpr}px`;

以上代码将 canvas 的实际宽度设置为 300 像素，如果设备像素比为 2，则最终的 canvas 宽度为 600 像素，CSS 宽度为 300 像素