How to resize html canvas element?

在HTML中，<canvas> 元素用来绘制图形，其大小可以通过多种方式进行调整。重要的是要区分CSS样式和画布的实际绘图表面大小之间的区别。以下是几种调整HTML画布元素大小的方法：

1. 直接在HTML标签中设置

可以直接在<canvas>标签中使用width和height属性来指定画布的大小。这种方式设置的是画布的绘图表面大小，而非通过CSS控制的视觉展示大小。

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

在这个例子中，画布的绘图表面被设置为300像素宽和200像素高。

2. 使用CSS调整大小

通过CSS，可以调整画布的大小，但这种方法只影响画布的显示大小，并不改变画布的实际绘图表面大小。如果CSS大小和绘图表面大小不一致，画布上的图形可能会被拉伸或压缩。

html
<style>
  #myCanvas {
    width: 300px;
    height: 200px;
  }
</style>
<canvas id="myCanvas"></canvas>

3. 使用JavaScript动态调整大小

在一些应用场景中，可能需要根据窗口大小或其他条件动态调整画布大小。这可以通过JavaScript来实现，同时确保画布的绘图表面大小和CSS大小一致，避免图形变形。

javascript
const canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

这段代码将画布的绘图表面大小调整为浏览器窗口的大小。

结论

调整HTML画布的大小时，最好同时设置其CSS和属性中的宽高，以确保画面显示不会因为CSS的拉伸而失真。在需要响应式设计或动态环境中，使用JavaScript动态调整大小通常是最灵活的解决方案。