मुझे HTML5 कैनवास की चौड़ाई और ऊंचाई कैसे मिलती है?

Question 1

मैं जावास्क्रिप्ट में कैनवास तत्व की चौड़ाई और ऊंचाई कैसे प्राप्त कर सकता हूं?

इसके अलावा, मैं जिस कैनवास के बारे में पढ़ता हूं, उसका "संदर्भ" क्या है?

Question 2

यह एक ट्यूटोरियल देखने लायक हो सकता है: फ़ायरफ़ॉक्स कैनवास ट्यूटोरियल

आप तत्व के उन गुणों का उपयोग करके एक कैनवास तत्व की चौड़ाई और ऊंचाई प्राप्त कर सकते हैं। उदाहरण के लिए:

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कैनवास के एपीआई के रूप में सोच सकते हैं , जो आपको कमांड के साथ प्रदान करता है जो आपको कैनवास तत्व पर आकर्षित करने में सक्षम बनाता है।

Question 3

इससे पहले, सभी उत्तर पूरी तरह से सही नहीं हैं। 2 प्रमुख ब्राउज़र उन 2 गुणों का समर्थन नहीं करते (IE उनमें से एक है) या उन्हें अलग तरह से उपयोग करते हैं।

बेहतर समाधान (अधिकांश ब्राउज़रों द्वारा समर्थित, लेकिन मैंने सफारी की जांच नहीं की):

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

कम से कम मुझे स्क्रॉलविद और -हाइट और MUST सेट कैनवस के साथ सही मान मिलते हैं। जब इसे आकार दिया जाता है तो इसकी ऊंचाई और ऊंचाई निर्धारित होती है।

Question 4

canvas.widthकैनवास के आंतरिक आयामों का उल्लेख करने वाले उत्तर , जो तत्व बनाते समय निर्दिष्ट होते हैं:

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

यदि आप सीएसएस के साथ कैनवास का आकार देते हैं, तो इसके 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">

स्निपेट का विस्तार करें

Question 5

संदर्भ ऑब्जेक्ट आपको कैनवास में हेरफेर करने की अनुमति देता है; आप उदाहरण के लिए आयतों को आकर्षित कर सकते हैं और बहुत कुछ।

यदि आप चौड़ाई और ऊंचाई प्राप्त करना चाहते हैं, तो आप मानक HTML विशेषताओं का उपयोग कर सकते हैं widthऔर height:

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

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

Question 6

अब 2015 सभी (प्रमुख?) ब्राउज़रों को शुरू करना c.widthऔर c.heightकैनवास को आंतरिक आकार प्राप्त करना प्रतीत होता है , लेकिन:

सवाल जवाब के रूप में याद कर रहे हैं, क्योंकि एक कैनवास सिद्धांत 2 अलग / स्वतंत्र आकार में है।

"Html" सीएसएस चौड़ाई / ऊंचाई और अपनी खुद की (विशेषता-) चौड़ाई / ऊंचाई कहने देता है

विभिन्न आकार के इस संक्षिप्त उदाहरण को देखें , जहां मैंने 300/200 html-एलिमेंट में 200/200 कैनवस डाला

अधिकांश उदाहरणों के साथ (सभी मैंने देखा) कोई सीएसएस-आकार का सेट नहीं है, इसलिए वे स्पष्ट रूप से (ड्राइंग-) कैनवास के आकार की चौड़ाई और ऊंचाई प्राप्त करते हैं। लेकिन यह एक जरूरी नहीं है, और यदि आप गलत आकार लेते हैं, तो यह मजेदार परिणाम दे सकता है - यानी। आंतरिक स्थिति के लिए सीएसएस विधुत / ऊँचाई।

Question 7

उनमें से किसी ने मेरे लिए काम नहीं किया। इसे इस्तेमाल करे।

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

Question 8

यहां एक CodePen है जो किसी भी आकार में किसी भी कैनवास को सही ढंग से प्रस्तुत करने के लिए कैनवस / ऊंचाई / चौड़ाई, CSS ऊंचाई / चौड़ाई और संदर्भ का उपयोग करता है ।

HTML:

<button onclick="render()">Render</button>
<canvas id="myCanvas" height="100" width="100" style="object-fit:contain;"></canvas>

सीएसएस:

canvas {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  display: block;
}

जावास्क्रिप्ट:

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 ऊँचाई / चौड़ाई तो लेआउट स्थान को फिट करने के लिए बिटमैप को मापता है (अक्सर इसे तराजू के रूप में इसे ताना जाता है)। यह संदर्भ विभिन्न आकारों में वेक्टर ऑपरेशन का उपयोग करके, इसे आकर्षित करने के पैमाने को संशोधित कर सकता है।

Question 9

मुझे एक समस्या थी क्योंकि मेरा कैनवास आईडी के बिना एक कंटेनर के अंदर था इसलिए मैंने नीचे इस jquery कोड का उपयोग किया

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