canvas的width与height属性的值可不可以带单位？
在 HTML5 的 `<canvas>` 元素中，`width` 和 `height` 属性的值不能带单位，必须是整数值。这是因为这两个属性定义了画布的内部像素尺寸，而不是 CSS 中的宽高属性。

### 1. 属性定义

`<canvas>` 标签的 `width` 和 `height` 属性直接影响到画布的绘制区域。例如：

```html
<canvas id="myCanvas" width="300" height="150"></canvas>
```

在这个例子中，画布的宽度为 300 像素，高度为 150 像素。如果您尝试像下面这样设置带单位的值：

```html
<canvas id="myCanvas" width="300px" height="150px"></canvas> <!-- 错误 -->
```

浏览器将忽略这些带单位的值，画布的实际尺寸将默认为 300 像素和 150 像素。

### 2. CSS 样式

如果需要调整 `<canvas>` 的显示效果，可以使用 CSS 来设置它的外部样式。例如：

```html
<canvas id="myCanvas" width="300" height="150" style="width: 100%; height: 100%;"></canvas>
```

在这里，`width` 和 `height` 属性仍然是像素值，而 CSS 的 `style` 属性可以使用百分比或其他单位来控制画布在页面上的显示大小。

### 3. 注意事项

- **分辨率**：使用 CSS 设置的宽高与 `<canvas>` 的 `width` 和 `height` 属性的值不一致时，可能会导致画布显示模糊。因此，建议将 `canvas` 的实际尺寸与 CSS 样式保持一致，以保证画面的清晰度。

- **动态调整**：如果需要在 JavaScript 中动态调整画布的大小，可以修改 `width` 和 `height` 属性的值，例如：

```javascript
const canvas = document.getElementById('myCanvas');
canvas.width = 400; // 修