Canvas 像素对齐与清晰字体：最佳实践指南

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 像素。