如何使用 javascript 设置 canvas 的大小

在JavaScript中设置canvas的大小主要有两种方法：通过HTML属性和通过JavaScript代码。

1. 通过HTML属性设置Canvas大小

在HTML文档中直接设置canvas的宽度和高度是最简单的方法。这可以通过width和height属性来实现。例如：

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

这段代码会创建一个宽度为500像素，高度为300像素的canvas元素。

2. 通过JavaScript代码设置Canvas大小

如果你需要在运行时动态改变canvas的大小，可以通过JavaScript来设置。首先，你需要获取到canvas元素的引用，然后设置其width和height属性。例如：

javascript
var canvas = document.getElementById('myCanvas');
canvas.width = 500;
canvas.height = 300;

这段代码首先通过getElementById方法获取到ID为myCanvas的canvas元素，然后设置其宽度为500像素和高度为300像素。

动态适应屏幕大小

在一些应用场景中，我们可能希望canvas能够自适应其容器或浏览器窗口的大小。这时，可以监听窗口的resize事件来动态调整canvas大小。例如：

javascript
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
    var canvas = document.getElementById('myCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

resizeCanvas(); // 初始化canvas大小

这段代码通过监听窗口的resize事件，在窗口大小变化时，动态调整canvas的大小以匹配窗口的尺寸。

小结

设置Canvas大小通常直接在HTML中通过属性设置，或者通过JavaScript动态调整以适应不同的需求。在实际开发中，根据具体情况选择合适的方法来设置Canvas的大小是非常重要的。例如，在开发响应式网页或者需要在用户操作后改变画布大小的应用中，使用JavaScript动态调整大小会更加灵活有效。