JS 设置画布大小 - JavaScript

在前端开发中，Canvas 是一个强大的 HTML5 元素，用于绘制图形。当我们需要使用 Canvas 绘制图形时，通常需要设置画布大小。本篇文章将介绍如何使用 JavaScript 设置画布大小。

设置画布大小

我们可以通过直接修改 Canvas 的 width 和 height 属性来设置画布大小。以下是设置画布大小的 JavaScript 代码：

const canvas = document.querySelector("#myCanvas");
canvas.width = 800; // 设置画布宽度为 800 像素
canvas.height = 600; // 设置画布高度为 600 像素

上述代码中，我们首先通过 querySelector 方法获取 Canvas 元素，然后分别对 width 和 height 属性进行赋值，以设置画布大小。

自适应窗口大小

有时候，我们需要使 Canvas 元素随着浏览器窗口大小的变化而自适应。为了实现这个功能，我们需要在窗口大小改变时动态修改 Canvas 的大小。以下是实现自适应窗口大小的 JavaScript 代码：

const canvas = document.querySelector("#myCanvas");

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

window.addEventListener("resize", resizeCanvas);

在上述代码中，我们定义了一个 resizeCanvas 函数，用于动态修改 Canvas 元素的大小。在 resizeCanvas 函数中，我们使用 window.innerWidth 和 window.innerHeight 分别获取浏览器窗口的宽度和高度，并将其赋值给 Canvas 的 width 和 height 属性。

在页面加载完成后，我们需要调用 resizeCanvas 函数一次以初始化 Canvas 的大小。此后，每当窗口大小改变时，就会触发 resize 事件，从而调用 resizeCanvas 函数，使 Canvas 元素随之改变大小，实现自适应窗口大小的功能。

结论

在前端开发中使用 Canvas 绘制图形时，我们通常需要设置画布大小。本文介绍了如何使用 JavaScript 设置 Canvas 的大小，以及如何实现自适应窗口大小的功能。希望对大家有所帮助！