Bir HTML5 tuvalinin genişliğini ve yüksekliğini nasıl elde ederim?

JavaScript öğesinin genişliğini ve yüksekliğini nasıl alabilirim?

Ayrıca, okumaya devam ettiğim tuvalin "bağlamı" nedir?

Bir öğreticiye bakmaya değer olabilir: MDN Canvas Eğitimi

Bir tuval öğesinin genişliğini ve yüksekliğini yalnızca öğenin bu özelliklerine erişerek elde edebilirsiniz. Örneğin:

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

Tuval öğesinde genişlik ve yükseklik özellikleri yoksa, varsayılan 300x150 boyutu döndürülür. Doğru genişliği ve yüksekliği dinamik olarak elde etmek için aşağıdaki kodu kullanın:

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

Veya daha kısa nesne yıkıcı sözdizimini kullanarak:

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

Bu context, tuvalin içine çizim yapmanıza izin vermek için aldığınız bir nesnedir. Bunu context, tuval öğesi üzerinde çizim yapmanızı sağlayan komutları sağlayan tuval için API olarak düşünebilirsiniz .

Eh, önceki tüm cevaplar tamamen doğru değil. 2 büyük tarayıcı bu 2 özelliği desteklemiyor (IE bunlardan biridir) veya farklı şekilde kullanmıyor.

Daha iyi çözüm (çoğu tarayıcı tarafından destekleniyor, ancak Safari'yi kontrol etmedim):

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

En azından scrollWidth ve -Height ile doğru değerleri alıyorum ve yeniden boyutlandırıldığında canvas.width ve yüksekliği ayarlamalıdır.

Bahsedilen cevaplar canvas.width, tuvalin iç boyutlarını, yani öğeyi oluştururken belirtilenleri döndürür:

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

Tuvali CSS ile boyutlandırırsanız, DOM boyutlarına .scrollWidthve aracılığıyla erişilebilir .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">

Bağlam nesnesi, tuvali değiştirmenize olanak tanır; örneğin dikdörtgenler ve çok daha fazlasını çizebilirsiniz.

Genişliği ve yüksekliği elde etmek istiyorsanız, sadece standart HTML özelliklerini kullanabilirsiniz widthve height:

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

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

şimdi 2015'ten itibaren tüm (büyük?) tarayıcılar küçülmüş c.widthve c.heighttuvalin iç boyutunu alacak gibi görünüyor , ancak:

Cevaplar olarak soru yanlış yönlendiricidir, çünkü tuvalin prensipte 2 farklı / bağımsız boyutu vardır.

"Html", CSS genişliği / yüksekliği ve kendi (öznitelik-) genişliği / yüksekliği diyelim

200/200 tuvali bir 300/100 html öğesine koyduğum bu farklı boyutlandırma örneğine bakın

Çoğu örnekte (gördüğüm tek şey) css boyutu kümesi yoktur, bu nedenle bunlar (çizim) tuval boyutunun genişliğini ve yüksekliğini ifade eder. Ancak bu bir zorunluluk değildir ve yanlış beden alırsanız komik sonuçlar verebilir - yani. iç konumlandırma için css genişlik / yükseklik.

Bunların hiçbiri benim için çalışmadı. Bunu dene.

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

İşte, herhangi bir boyuttaki herhangi bir tuvali doğru şekilde oluşturmak için canvas.height / width, CSS yüksekliği / genişliği ve bağlamı kullanan bir CodePen .

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

Temel olarak, canvas.height / width, oluşturduğunuz bitmap'in boyutunu ayarlar. CSS yüksekliği / genişliği daha sonra bitmap'i mizanpaj alanına sığacak şekilde ölçeklendirir (genellikle ölçeklendirirken onu çarpıtır). Bağlam daha sonra, farklı boyutlarda vektör işlemlerini kullanarak çizmek için ölçeğini değiştirebilir.

Bir sorun yaşadım çünkü tuvalim kimliği olmayan bir kabın içindeydi, bu yüzden aşağıdaki jquery kodunu kullandım

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