如何获得HTML5画布的宽度和高度?

时间:2010-10-27 10:24:51

标签: javascript html5 canvas

如何在JavaScript中获取canvas元素的宽度和高度?

此外,我一直在阅读的画布的“背景”是什么?

8 个答案:

答案 0 :(得分:102)

可能值得查看教程:Firefox Canvas Tutorial

只需访问元素的属性,即可获得canvas元素的宽度和高度。例如:

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

上下文是从画布中获取的对象,允许您绘制它。

答案 1 :(得分:35)

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

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

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

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

答案 2 :(得分:18)

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

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

如果使用CSS调整画布大小,可以通过.scrollWidth.scrollHeight访问其DOM尺寸:

&#13;
&#13;
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);
&#13;
<p id="dom-dims"></p>
<p id="internal-dims"></p>
<canvas style="width: 100%; height: 123px; border: 1px dashed black">
&#13;
&#13;
&#13;

答案 3 :(得分:17)

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

如果您想获得宽度和高度,可以使用标准HTML属性widthheight

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

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

答案 4 :(得分:7)

现在开始2015所有(主要?)浏览器似乎让c.widthc.height获得画布内部尺寸,但是:

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

“html”可以说CSS宽度/高度和它自己的(属性 - )宽度/高度

看看这个short example of different sizing,我把200/200画布放到300/100 html元素中

对于大多数示例(我看到的所有内容)都没有css-size设置,因此theese得到了(绘图)画布大小的宽度和高度。但这不是必须的,并且如果你采取错误的尺寸可以产生有趣的结果 - 即。 css widht / height用于内部定位。

答案 5 :(得分:0)

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

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

答案 6 :(得分:0)

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

基本上,canvas.height / width设置要渲染到的位图的大小。然后,CSS高度/宽度会缩放位图以适合布局空间(通常在缩放时会变形)。然后,上下文可以使用矢量操作修改其比例以绘制为不同大小。

答案 7 :(得分:-1)

我遇到了问题,因为我的画布位于没有ID的容器内,所以我在下面使用了这个jquery代码

$('.cropArea canvas').width()