![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
jym可以继续蹲后续见面帖子，不过可能会有点久，这几个礼拜吧![[灵光一现]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
指尖逝流年
无趣
获得徽章 8
赞了这篇沸点
![[不失礼貌的微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
赞了这篇沸点
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; // 修
在 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; // 修
展开
评论
3