javascript - 如何获取 HTML5 Canvas 的宽度和高度？

Question

如何在 JavaScript 中获取 Canvas 元素的宽度和高度？

此外，我一直阅读的 Canvas 的“上下文”是什么？

Answer 1

可能值得看一个教程:MDN Canvas Tutorial

您可以简单地通过访问元素的这些属性来获取 Canvas 元素的宽度和高度。例如:

var canvas = document.getElementById('mycanvas');
var width = canvas.width;
var height = canvas.height;

如果 Canvas 元素中不存在宽度和高度属性，将返回默认的 300x150 大小。要动态获取正确的宽度和高度，请使用以下代码:

const canvasW = canvas.getBoundingClientRect().width;
const canvasH = canvas.getBoundingClientRect().height;

或者使用更短的对象解构语法:

const { width, height } = canvas.getBoundingClientRect();

context 是您从 Canvas 中获取的一个对象，可让您在其中绘图。您可以将 context 视为 Canvas 的 API，它为您提供了使您能够在 Canvas 元素上绘图的命令。