如何获取 HTML5 画布的宽度和高度？

Posted 2023-02-16

【中文标题】如何获取 HTML5 画布的宽度和高度？

【英文标题】：How do I get the width and height of a HTML5 canvas?

【发布时间】：2011-05-01 05:42:01

【问题描述】：

如何在 javascript 中获取 canvas 元素的宽度和高度？

另外，我一直在阅读的画布的“上下文”是什么？

【参考方案1】：

可能值得一看教程：MDN Canvas Tutorial

您可以通过访问元素的这些属性来获取画布元素的宽度和高度。例如：

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

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

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

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

const  width, height  = canvas.getBoundingClientRect();

context 是您从画布中获取的对象，可让您在其中进行绘制。您可以将context 视为画布的 API，它为您提供使您能够在画布元素上绘图的命令。

【讨论】：

请注意，不幸的是，Mozilla 教程现在基本上是一堆损坏的链接。希望他们有一天能修复它。

这将返回 Chrome 31 中的上下文画布大小。

仅当width 和height 直接指定为<canvas /> 标签属性时才有效

这不是真的。即使没有标签属性，它也总是返回一个值，默认为 300 x 150。

@Z80 - 您的 canvas 是 2D 上下文，而不是画布。上面的canvas 是 html 画布元素，而不是 2D 上下文。

【参考方案2】：

上下文对象允许你操作画布；例如，您可以绘制矩形等等。

如果你想得到宽度和高度，你可以使用标准的HTML属性width和height：

var canvas = document.getElementById( 'yourCanvasID' );
var ctx = canvas.getContext( '2d' );

alert( canvas.width );
alert( canvas.height ); 

【讨论】：

此答案与@andrewmu 的答案几乎相同，如果您通过 CSS 调整画布大小，则该答案将不起作用。请参阅my answer 以获得更强大的解决方案。

【参考方案3】：

嗯，之前的所有答案都不完全正确。 2 个主流浏览器不支持这 2 个属性（IE 就是其中之一）或以不同方式使用它们。

更好的解决方案（大多数浏览器都支持，但我没有检查Safari）：

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

至少我使用 scrollWidth 和 -Height 获得了正确的值，并且在调整其大小时必须设置 canvas.width 和 height。

【讨论】：

IE9 似乎确实支持 canvas.width 和 height（9 之前的版本根本不支持 canvas），我刚刚试了一下。你遇到了什么麻烦？另一个主要的浏览器是哪个？

对，我真的从不更新IE，因为我不使用它。另一个主要浏览器是 Opera，它在调整大小时没有/不更新宽度和高度。

canvas.width 或 height 不返回画布的总大小，首选 canvas.scrollWidth 或高度来获取画布的总实际大小。

这对我有用，但其他答案没有。如果使用引导程序设置画布，我正在寻找一种可以获得宽度和高度的解决方案。

【参考方案4】：

现在从 2015 年开始，所有（主要？）浏览器似乎都允许 c.width 和 c.height 获得画布 internal 大小，但是：

作为答案的问题具有误导性，因为画布原则上具有 2 种不同/独立的尺寸。

“html”可以说 CSS 宽度/高度和它自己的（属性）宽度/高度

看看这个short example of different sizing，我将一个 200/200 的画布放入一个 300/100 的 html 元素中

对于大多数示例（我所看到的），没有设置 css 大小，所以这些都隐含了（绘图）画布大小的宽度和高度。但这不是必须的，如果您选择错误的尺寸，可能会产生有趣的结果 - 即。用于内部定位的 css 宽度/高度。

【参考方案5】：

提到canvas.width的答案返回画布的内部尺寸，即创建元素时指定的尺寸：

<canvas  >

如果您使用 CSS 调整画布大小，则可以通过 .scrollWidth 和 .scrollHeight 访问其 DOM 尺寸：

var canvasElem = document.querySelector('canvas');
document.querySelector('#dom-dims').innerHTML = 'Canvas DOM element width x height: ' +
      canvasElem.scrollWidth +
      ' x ' +
      canvasElem.scrollHeight

var canvasContext = canvasElem.getContext('2d');
document.querySelector('#internal-dims').innerHTML = 'Canvas internal width x height: ' +
      canvasContext.canvas.width +
      ' x ' +
      canvasContext.canvas.height;

canvasContext.fillStyle = "#00A";
canvasContext.fillText("Distorted", 0, 10);

<p id="dom-dims"></p>
<p id="internal-dims"></p>
<canvas style="width: 100%; height: 123px; border: 1px dashed black">

【讨论】：

那是正确的答案。需要考虑的 2 个维度。

这应该是选择的答案。如果您不指定任何值并使用相对大小（在使用引导程序等时），直接调用 width 和 height 将始终返回 300x150。谢谢。

【参考方案6】：

这些都不适合我。试试这个。

console.log($(canvasjQueryElement)[0].width)

【参考方案7】：

Here's a CodePen that uses canvas.height/width, CSS height/width, and context to correctly render any canvas at any size.

HTML：

<button onclick="render()">Render</button>
<canvas id="myCanvas"   style="object-fit:contain;"></canvas>

CSS：

canvas 
  width: 400px;
  height: 200px;
  border: 1px solid red;
  display: block;

Javascript：

const myCanvas = document.getElementById("myCanvas");
const originalHeight = myCanvas.height;
const originalWidth = myCanvas.width;
render();
function render() 
  let dimensions = getObjectFitSize(
    true,
    myCanvas.clientWidth,
    myCanvas.clientHeight,
    myCanvas.width,
    myCanvas.height
  );
  myCanvas.width = dimensions.width;
  myCanvas.height = dimensions.height;

  let ctx = myCanvas.getContext("2d");
  let ratio = Math.min(
    myCanvas.clientWidth / originalWidth,
    myCanvas.clientHeight / originalHeight
  );
  ctx.scale(ratio, ratio); //adjust this!
  ctx.beginPath();
  ctx.arc(50, 50, 50, 0, 2 * Math.PI);
  ctx.stroke();


// adapted from: https://www.npmjs.com/package/intrinsic-scale
function getObjectFitSize(
  contains /* true = contain, false = cover */,
  containerWidth,
  containerHeight,
  width,
  height
) 
  var doRatio = width / height;
  var cRatio = containerWidth / containerHeight;
  var targetWidth = 0;
  var targetHeight = 0;
  var test = contains ? doRatio > cRatio : doRatio < cRatio;

  if (test) 
    targetWidth = containerWidth;
    targetHeight = targetWidth / doRatio;
   else 
    targetHeight = containerHeight;
    targetWidth = targetHeight * doRatio;
  

  return 
    width: targetWidth,
    height: targetHeight,
    x: (containerWidth - targetWidth) / 2,
    y: (containerHeight - targetHeight) / 2
  ;

基本上，canvas.height/width 设置您要渲染的位图的大小。 CSS 高度/宽度然后缩放位图以适应布局空间（通常在缩放时扭曲它）。然后上下文可以修改它的比例以使用矢量操作以不同的大小进行绘制。