Canvas 宽高为小数时，如何控制 CSS 大小使像素点对齐并清晰显示字体

当 Canvas 的宽高为小数时，可以通过设置 CSS 样式来控制其大小，使像素点对齐，字体显示清晰。具体方法如下：

使用 Math.floor() 函数将 Canvas 的宽高转换为整数，保证像素点对齐。
设置 CSS 样式时，使用转换后的宽高值。

例如：

HTML 代码：

<canvas id='myCanvas'></canvas>

CSS 样式：

#myCanvas {
  width: 300px;
  height: 200px;
}

JavaScript 代码：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.width = Math.floor(300);
canvas.height = Math.floor(200);

通过将 Canvas 的宽高值转换为整数，可以确保像素点对齐，使得字体显示清晰。

计算方法：

计算宽高的方法可以根据具体情况而定，以下是一种基本的计算方法：

在 CSS 样式中设置 Canvas 的宽高值。
在 JavaScript 代码中获取 Canvas 的宽高值。
判断宽高值是否为小数，如果是，则使用 Math.floor() 函数将其转换为整数。
将转换后的宽高值赋值给 Canvas 的 width 和 height 属性。

例如：

HTML 代码：

<canvas id='myCanvas'></canvas>

CSS 样式：

#myCanvas {
  width: 300.5px;
  height: 200.8px;
}

JavaScript 代码：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var width = canvas.offsetWidth;
var height = canvas.offsetHeight;
if (width % 1 !== 0) {
  width = Math.floor(width);
}
if (height % 1 !== 0) {
  height = Math.floor(height);
}
canvas.width = width;
canvas.height = height;

在上述代码中，使用 Canvas 的 offsetWidth 和 offsetHeight 属性获取宽高值，判断是否为小数，如果是，则使用 Math.floor() 函数将其转换为整数。最后将转换后的宽高值赋值给 Canvas 的 width 和 height 属性。