সিএসএস ব্যবহার করার সময় ক্যানভাস প্রসারিত হয় তবে "প্রস্থ" / "উচ্চতা" বৈশিষ্ট্য সহ সাধারণ

Question

আমার 2 টি ক্যানভাস রয়েছে, একটিতে এইচটিএমএল বৈশিষ্ট্য ব্যবহার করা হয় widthএবং heightএটি আকার করতে অন্যটি সিএসএস ব্যবহার করে:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 এর মতো প্রদর্শনগুলি করা উচিত তবে এটি compteur2 নয়। সামগ্রীটি 300x300 ক্যানভাসে জাভাস্ক্রিপ্ট ব্যবহার করে আঁকা।

ডিসপ্লে পার্থক্য কেন?

Answer 1

মনে হয় এটি widthএবংheight বৈশিষ্ট্যগুলি ক্যানভাসের স্থানাঙ্ক ব্যবস্থার প্রস্থ বা উচ্চতা নির্ধারণ করে, যখন CSS বৈশিষ্ট্যগুলি বাক্সটির আকার নির্ধারণ করে যেখানে এটি প্রদর্শিত হবে।

এটি http : //www. पातwg.org/html#attr-canvas-width (জেএস প্রয়োজন) বা http://www. पातwg.org/c#attr-canvas-width এ সম্ভবত ব্যাখ্যা করা হবে (সম্ভবত আপনার কম্পিউটারটি খাবে) :

canvasউপাদান উপাদান এর বিটম্যাপ মাপ নিয়ন্ত্রণ করতে দুই বৈশিষ্ট্য আছে: widthএবং height। এই বৈশিষ্ট্যগুলি নির্দিষ্ট করার সময় অবশ্যই মানগুলি হবে যা বৈধ অ-নেতিবাচক পূর্ণসংখ্যা । অ নেতিবাচক পূর্ণসংখ্যার পার্স জন্য নিয়ম তাদের সাংখ্যিক মান প্রাপ্ত করার ব্যবহার করা আবশ্যক। যদি কোনও বৈশিষ্ট্য অনুপস্থিত, বা যদি এর মানটিকে বিশ্লেষণ করে ত্রুটি ফিরে আসে, তবে পরিবর্তে ডিফল্ট মানটি ব্যবহার করা উচিত। width300 অ্যাট্রিবিউট ডিফল্টগুলি, এবং height150 অ্যাট্রিবিউট অক্ষমতা।

Comments

প্রকৃতপক্ষে .. আমি সর্বদা ভাবতাম যে "প্রস্থ" এবং "উচ্চতা" এর মতো প্রত্যক্ষ গুণাবলী সাম্প্রতিক এইচটিএমএল সংস্করণগুলিতে

— হ্রাস করা হয়েছে

ওহ, স্পষ্টতই এটি কি পরিবর্তে আরও ভালভাবে বর্ণনা করা হয়েছে whatswg.org/specs/web-apps/current-work/m মাল্টিপেজ/… (বিভাগ #attr-canvas-width) এ। সমস্যাটি হ'ল আমি ভুলটি widthআগে ক্লিক করেছি এবং #dom-canvas-widthপরিবর্তে বিভাগে গিয়েছি । দায়ের w3.org/Bugs/Public/show_bug.cgi?id=9469 এটি সম্পর্কে।

— স্যামবি

দেখতে এমন একটি এপিআই থাকা যা দেখতে দেখতে দেখতে অন্যরকম (সিএসএস প্রস্থ, উচ্চতা) এর থেকে মৌলিকভাবে পৃথক। কি দারুন.

— বেন অ্যাস্টন

আপনি যখন অভ্যন্তরীণ স্থানাঙ্ক ব্যবস্থাকে আলাদা করতে চান তখন এই সময়ের জন্য এই পার্থক্য করা গুরুত্বপূর্ণ। (যেমন রেটিনা প্রদর্শন বা 8 বিট শৈলীর খেলার জন্য)

— স্যামি বেঞ্চিরিফ

এটা সত্যিই বিভ্রান্তিকর ছিল। আমরা যেখানে CSS তে প্রস্থ এবং উচ্চতা নির্ধারণ করার চেষ্টা করছি। প্রস্থ এবং উচ্চতা সম্পর্কে এই 2 টি পৃথক ব্যাখ্যা সম্পর্কে জানতে চুল টানতে আমাদের 2 দিনের সময় নিয়েছিল। শুধু বাহ ...

— এনএমই নিউ মিডিয়া বিনোদন

Answer 2

সেট করতে widthএবং heightআপনার প্রয়োজন হিসাবে, আপনি ব্যবহার করতে পারেন

canvasObject.setAttribute('width', '475');

Comments

+1 el.setAttribute('width', parseInt($el.css('width')))কৌশলটি করেছে, ধন্যবাদ

— শানিমাল

আমার ক্যানভাসের আপেক্ষিক আকার থাকতে চাইলে কী হবে? এটি বলতে হয়, কিভাবে একটি width: 100%;CSS সম্পত্তি অনুকরণ ?

— ম্যাক্সবেস্টার

দুর্দান্ত উত্তর, তবে ক্যানভাসবজেক্ট.সেটআট্রিবিউট ('উচ্চতা', '123') যুক্ত করতে ভুলবেন না!

— টম ওয়েলস

আমার মনে হয় না যে আপনি .setAttribute () ব্যবহার করার দরকার আছে আমি সর্বদা। প্রশস্ততা এবং উচ্চতা বৈশিষ্ট্যগুলি ব্যবহার করেছি

— জোরগাটোন

GetComputesStyle : ব্যবহার করে সরল জাভাস্ক্রিপ্ট (jQuery ছাড়াই) সংস্করণ canvas.setAttribute('width', window.getComputedStyle(canvas, null).getPropertyValue("width"));। উচ্চতার জন্য পুনরাবৃত্তি করুন।

— বেন জে

Answer 3

জন্য <canvas>উপাদান, জন্য CSS নিয়ম widthএবং heightক্যানভাস উপাদানের যে পেজটি থেকে টানা হবে আসল আকার সেট করুন। অন্যদিকে, এইচটিএমএল বৈশিষ্ট্যগুলি widthএবং heightসমন্বিত সিস্টেমের আকার বা সেট করে বা 'গ্রিড' যা ক্যানভাস এপিআই ব্যবহার করবে।

উদাহরণস্বরূপ, এটি বিবেচনা করুন ( jsfiddle ):

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

ক্যানভাস উপাদানটির অভ্যন্তরীণ স্থানাঙ্কের তুলনায় উভয়েরই একই জিনিস ছিল। তবে দ্বিতীয় ক্যানভাসে, লাল আয়তক্ষেত্র দ্বিগুণ প্রশস্ত হবে কারণ সিএসএস বিধি দ্বারা সামগ্রিকভাবে ক্যানভাস একটি বৃহত অঞ্চল জুড়ে প্রসারিত হচ্ছে।

দ্রষ্টব্য: যদি সিএসএসের নিয়মগুলি widthএবং / বা heightনির্দিষ্ট না করা থাকে তবে ব্রাউজারটি এইচটিএমএল বৈশিষ্ট্যগুলি উপাদানটির আকারের জন্য ব্যবহার করবে যে এই মানগুলির 1 ইউনিট পৃষ্ঠায় 1px এর সমান। এই বৈশিষ্ট্যাবলী সুনির্দিষ্ট নেই তাহলে তারা একটি ডিফল্ট করবে widthএর 300এবং heightএর 150।

Answer 4

আপনি যদি আপনার সিএসএসে প্রস্থ এবং উচ্চতা নির্ধারণ করেন তবে ক্যানভাস প্রসারিত হবে। আপনি যদি ক্যানভাসের মাত্রাটি গতিশীলভাবে পরিচালনা করতে চান তবে আপনাকে জাভাস্ক্রিপ্ট এর মতো ব্যবহার করতে হবে:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

Comments

গ্রেট! এই উত্তরের জন্য ধন্যবাদ। ইমেজ প্রসারিত এড়াতে আমাকে canvas.setAttributeআগে রাখতে হয়েছিল canvas.getContext('2d')to

— এইচএইচ

Answer 5

ব্রাউজারটি CSS প্রস্থ এবং উচ্চতা ব্যবহার করে তবে ক্যানভাসের প্রস্থ এবং উচ্চতার উপর ভিত্তি করে ক্যানভাস উপাদান স্কেল করে। জাভাস্ক্রিপ্টে, CSS প্রস্থ এবং উচ্চতা পড়ুন এবং ক্যানভাসের প্রস্থ এবং উচ্চতাটি সেট করুন।

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Answer 6

শ্যানিমাল সংশোধন

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

Answer 7

সিএসএস ক্যানভাস উপাদানটির প্রস্থ এবং উচ্চতা নির্ধারণ করে যাতে এটি স্থায়ী স্থানকে প্রভাবিত করে যা আঁকানো সমস্ত কিছু ছেড়ে যায়

ভ্যানিলা জাভাস্ক্রিপ্ট সহ প্রস্থ এবং উচ্চতা কীভাবে সেট করবেন সে সম্পর্কে আমার এই উপায়

canvas.width = numberForWidth

canvas.height = numberForHeight

Answer 8

আপনি যদি সিএসএস মিডিয়া ক্যোয়ারির উপর ভিত্তি করে গতিশীল আচরণ চান তবে ক্যানভাস প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি ব্যবহার করবেন না। সিএসএস বিধিগুলি ব্যবহার করুন এবং তারপরে, ক্যানভাস রেন্ডারিং প্রসঙ্গটি পাওয়ার আগে, প্রস্থ এবং উচ্চতার জন্য সিএসএস প্রস্থ এবং উচ্চতার শৈলীর বৈশিষ্ট্য নির্ধারণ করুন:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...

Comments

এটি স্পষ্ট যে ক্যানভাস একটি ডিফল্ট স্থানাঙ্ক আকার (300 x 150) পাবে যদি আকারটি কেবল CSS এ নির্দিষ্ট করা থাকে। তবে, এই পরামর্শটি আমার পক্ষে কাজ করে না, তবে নীচের সমাধানটি কার্যকর করে।

— পার লিন্ডবার্গ

@ পেরলিন্ডবার্গ - আপনি যদি ক্যানভাস উপাদানটির জন্য পিক্সেলগুলিতে কোনও সিএসএস প্রস্থ এবং উচ্চতা নির্ধারণ করে থাকেন তবে এই সমাধানটি কাজ করে।

— মানোলো