ฉันจะรับความกว้างและความสูงของผ้าใบ HTML5 ได้อย่างไร

ฉันจะรับความกว้างและความสูงขององค์ประกอบ canvas ใน JavaScript ได้อย่างไร

นอกจากนี้ "บริบท" ของผืนผ้าใบที่ฉันอ่านอยู่เสมอคืออะไร

มันอาจจะคุ้มค่าที่จะดูบทช่วยสอน: MDN Canvas Tutorial

คุณสามารถรับความกว้างและความสูงขององค์ประกอบผ้าใบได้ง่ายๆโดยการเข้าถึงคุณสมบัติเหล่านั้นขององค์ประกอบ ตัวอย่างเช่น:

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

หากไม่มีแอตทริบิวต์ความกว้างและความสูงในองค์ประกอบ canvas ขนาดเริ่มต้น 300x150 จะถูกส่งกลับ หากต้องการรับความกว้างและความสูงที่ถูกต้องแบบไดนามิกให้ใช้รหัสต่อไปนี้:

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

หรือใช้ไวยากรณ์การทำลายโครงสร้างวัตถุที่สั้นกว่า:

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

contextเป็นวัตถุที่คุณได้รับจากผืนผ้าใบเพื่อช่วยให้คุณสามารถวาดเป็นมัน คุณสามารถคิดว่าcontextAPI เป็นผืนผ้าใบซึ่งให้คำสั่งที่ช่วยให้คุณสามารถวาดบนองค์ประกอบผ้าใบได้

คำตอบทั้งหมดก่อนหน้านี้ไม่ถูกต้องทั้งหมด เบราว์เซอร์หลัก 2 ตัวไม่รองรับคุณสมบัติ 2 ตัวนั้น (IE คือหนึ่งในนั้น) หรือใช้ต่างกัน

ทางออกที่ดีกว่า (รองรับโดยเบราว์เซอร์ส่วนใหญ่ แต่ฉันไม่ได้ตรวจสอบ Safari):

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

อย่างน้อยฉันก็ได้รับค่าที่ถูกต้องด้วย scrollWidth และ -Height และต้องตั้งค่า canvas.width และ height เมื่อมีการปรับขนาด

คำตอบที่กล่าวถึง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">

วัตถุบริบทช่วยให้คุณจัดการผืนผ้าใบ คุณสามารถวาดรูปสี่เหลี่ยมได้เช่นและอื่น ๆ อีกมากมาย

หากคุณต้องการรับความกว้างและความสูงคุณสามารถใช้แอตทริบิวต์ HTML มาตรฐานwidthและheight:

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

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

ตอนนี้เริ่มตั้งแต่ปี 2015 เบราว์เซอร์ทั้งหมด (หลัก ๆ ?) ดูเหมือนจะมีขนาดเล็กลงc.widthและc.heightได้รับขนาดภายในผ้าใบแต่:

คำถามที่เป็นคำตอบเป็นคำตอบที่ไม่สามารถนำไปใช้ได้เนื่องจากผ้าใบมีหลักการ 2 ขนาดที่แตกต่างกัน / อิสระ

"html" จะบอกว่า CSS width / height และของตัวเอง (attribute-) width / height

ดูตัวอย่างสั้น ๆ ของการปรับขนาดที่แตกต่างกันซึ่งฉันใส่ผ้าใบ 200/200 ลงในองค์ประกอบ 300/100 html

ด้วยตัวอย่างส่วนใหญ่ (ทั้งหมดที่ฉันเห็น) ไม่มีชุดขนาด css ดังนั้นพวกเขาจึงบอกเป็นนัยถึงความกว้างและความสูงของขนาดผ้าใบ (รูปวาด -) แต่นั่นไม่ใช่สิ่งที่จำเป็นและสามารถให้ผลลัพธ์ที่น่าสนุกได้หากคุณใช้ขนาดผิด - เช่น css widht / ความสูงสำหรับการวางตำแหน่งภายใน

ไม่มีสิ่งใดที่เหมาะกับฉัน ลองทำตามนี้

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

นี่คือ CodePen ที่ใช้ canvas.height / width, CSS height / width และบริบทเพื่อแสดงผ้าใบทุกขนาดได้อย่างถูกต้อง

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 จะปรับขนาดบิตแมปให้พอดีกับพื้นที่เลย์เอาต์ (มักจะแปรปรวนเมื่อปรับขนาด) จากนั้นบริบทสามารถปรับเปลี่ยนมาตราส่วนเพื่อวาดโดยใช้การทำงานของเวกเตอร์ในขนาดต่างๆ

ฉันมีปัญหาเนื่องจากผืนผ้าใบของฉันอยู่ในคอนเทนเนอร์ที่ไม่มีรหัสดังนั้นฉันจึงใช้โค้ด jquery ด้านล่างนี้

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