Làm cách nào để lấy chiều rộng và chiều cao của canvas HTML5?

Làm cách nào để lấy chiều rộng và chiều cao của phần tử canvas trong JavaScript?

Ngoài ra, "bối cảnh" của canvas mà tôi tiếp tục đọc là gì?

Có thể đáng để xem hướng dẫn: Hướng dẫn về Firefox Canvas

Bạn có thể lấy chiều rộng và chiều cao của phần tử canvas chỉ bằng cách truy cập các thuộc tính đó của phần tử. Ví dụ:

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

Nếu thuộc tính chiều rộng và chiều cao không có trong phần tử canvas, kích thước mặc định 300x150 sẽ được trả về. Để tự động có được chiều rộng và chiều cao chính xác, hãy sử dụng mã sau:

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

Hoặc sử dụng cú pháp hủy cấu trúc đối tượng ngắn hơn:

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

Đây contextlà một đối tượng bạn lấy từ canvas để cho phép bạn vẽ vào nó. Bạn có thể contextcoi đây là API của canvas, cung cấp cho bạn các lệnh cho phép bạn vẽ trên phần tử canvas.

Tất cả các câu trả lời trước đây không hoàn toàn đúng. 2 trong số các trình duyệt chính không hỗ trợ 2 thuộc tính đó (IE là một trong số chúng) hoặc sử dụng chúng khác nhau.

Giải pháp tốt hơn (được hỗ trợ bởi hầu hết các trình duyệt, nhưng tôi không kiểm tra Safari):

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

Ít nhất tôi nhận được các giá trị chính xác với scrollWidth và -Height và PHẢI đặt canvas. width và height khi nó được thay đổi kích thước.

Các câu trả lời đề cập đến canvas.widthtrả về kích thước bên trong của canvas, tức là những kích thước được chỉ định khi tạo phần tử:

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

Nếu bạn định kích thước canvas bằng CSS, các kích thước DOM của nó có thể truy cập được qua .scrollWidthvà .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">

Đối tượng ngữ cảnh cho phép bạn thao tác trên canvas; bạn có thể vẽ hình chữ nhật chẳng hạn và nhiều hơn nữa.

Nếu bạn muốn lấy chiều rộng và chiều cao, bạn chỉ có thể sử dụng các thuộc tính HTML chuẩn widthvà height:

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

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

bây giờ bắt đầu từ năm 2015, tất cả các trình duyệt (chính?) dường như đồng ý c.widthvà c.heightnhận được kích thước bên trong canvas , nhưng:

câu hỏi như các câu trả lời là sai, bởi vì một canvas về nguyên tắc có 2 kích thước khác nhau / độc lập.

"Html" cho biết chiều rộng / chiều cao CSS và chiều rộng / chiều cao (thuộc tính-) của riêng nó

hãy xem ví dụ ngắn này về kích thước khác nhau , nơi tôi đặt một canvas 200/200 vào một phần tử html 300/100

Với hầu hết các ví dụ (tất cả những gì tôi thấy) không có tập hợp kích thước css, vì vậy chúng sẽ đưa ra chiều rộng và chiều cao của kích thước canvas (bản vẽ-). Nhưng đó không phải là điều bắt buộc và có thể tạo ra kết quả thú vị, nếu bạn lấy sai kích thước - tức là. css widht / chiều cao để định vị bên trong.

Không ai trong số đó làm việc cho tôi. Thử cái này.

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

Đây là một CodePen sử dụng canvas.height / width, CSS height / width và context để hiển thị chính xác mọi canvas ở bất kỳ kích thước nào .

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

Về cơ bản, canvas.height / width đặt kích thước của bitmap mà bạn đang kết xuất. Sau đó, chiều cao / chiều rộng CSS sẽ chia tỷ lệ bitmap để phù hợp với không gian bố cục (thường làm cong nó khi nó chia tỷ lệ). Sau đó, ngữ cảnh có thể sửa đổi tỷ lệ của nó để vẽ, sử dụng các phép toán vector, ở các kích thước khác nhau.

Tôi gặp sự cố vì canvas của tôi nằm bên trong vùng chứa không có ID nên tôi đã sử dụng mã jquery bên dưới

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