How do I get the width and height of a HTML5 canvas?

如何在 JavaScript 中获得画布元素的宽度和高度？

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

198336 次浏览
小开
最佳答案

值得一看的教程: MDN 帆布教程

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

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

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

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

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

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

context是您从画布获得的一个对象，允许您在其中绘制。您可以将 context看作画布的 API，它为您提供了在画布元素上绘制的命令。

小开

上下文对象允许您操作画布; 您可以绘制矩形等等。

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

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


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

之前的答案并不完全正确。2个主流浏览器不支持这2个属性(IE 就是其中之一) ，或者使用它们的方式不同。

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

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

至少我使用 scrollWidth 和-Height 得到了正确的值，并且在调整大小时必须设置画布宽度和高度。

小开

现在开始2015年所有(主流?)浏览器似乎允许 c.width和 c.height得到画布 内部大小，但:

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

The "html" lets say CSS width/height and its own (attribute-) width/height

看看这个 不同尺寸的简单例子，我把一个200/200的画布放到一个300/100的 html 元素中

对于大多数例子(我所看到的) ，没有 css 大小设置，所以这些隐含了(绘图)画布大小的宽度和高度。但这并不是必须的，如果你选择了错误的尺寸，也会产生有趣的结果。用于内部定位的 css 宽度/高度。

小开

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

<canvas width="500" height="200">

如果你使用 CSS 调整画布的大小，它的 DOM 尺寸可以通过 .scrollWidth和 .scrollHeight访问:

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">

小开

这些对我都不管用，试试这个。

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

下面是一个 CodePen，它使用画布高度/宽度、 CSS 高度/宽度和上下文来正确地呈现任何大小 的画布。

HTML:

<button onclick="render()">Render</button>
<canvas id="myCanvas" height="100" width="100" 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
};
}

基本上，帆布高度/宽度设置您要呈现到的位图的大小。CSS 高度/宽度然后缩放位图以适应布局空间(通常在缩放时扭曲它)。然后上下文可以修改它的比例，使用向量操作，在不同的大小绘制。


提交答案