151

আমি একটি ক্যানভাস উপাদান তৈরি করার চেষ্টা করছি যা ভিউপোর্টের প্রস্থ এবং উচ্চতার 100% নেয়।

আপনি এখানে আমার উদাহরণে দেখতে পাচ্ছেন যা ঘটছে, তবে এটি ক্রোম এবং ফায়ারফক্স উভয় ক্ষেত্রে স্ক্রোল বার যুক্ত করছে adding আমি কীভাবে অতিরিক্ত স্ক্রোল বারগুলি প্রতিরোধ করতে পারি এবং ক্যানভাসের আকার হতে ঠিক উইন্ডোটির প্রস্থ এবং উচ্চতা সরবরাহ করতে পারি?

— aherrick
সূত্র

1

আরও দেখুন: stackoverflow.com/questions/4037212

— hippietrail

আমাকে একটি বরং মজাদার ফোনজ্যাকার কমেডি স্কেচের কথা মনে করিয়ে দেয়: youtu.be/6oj_oLMD688?t=22s

— ফ্রান্সিস বুথ

257

ক্যানভাসের পূর্ণ পর্দার প্রস্থ এবং উচ্চতা সর্বদা তৈরি করার জন্য, ব্রাউজারটি পুনরায় আকার দেওয়ার পরেও, আপনাকে একটি ক্রিয়াকলাপের মধ্যে আপনার ড্র লুপটি চালানো দরকার যা ক্যানভাসকে উইন্ডোজ.innerHight এবং উইন্ডো.innerwidth এ পুনরায় আকার দেয়।

উদাহরণ: http://jsfiddle.net/jaredwilli/qFuDr/

এইচটিএমএল

<canvas id="canvas"></canvas>

জাভাস্ক্রিপ্ট

(function() {
    var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            /**
             * Your drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvas goes will be cleared.
             */
            drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
            // do your drawing stuff here
    }
})();

সিএসএস

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */

আপনি ব্রাউজারটির পুরো প্রস্থ এবং উচ্চতা ক্যানভাসকে সঠিকভাবে তৈরি করেন। আপনাকে কেবল ড্রস্টফ () ফাংশনে ক্যানভাসে অঙ্কনের জন্য সমস্ত কোড রাখতে হবে।

— jaredwilli
সূত্র

2

প্যাডিং অপসারণ এবং প্রস্থ, উচ্চতা 100% নির্ধারণ করা কেন প্রয়োজনীয়?

— কোস

3

আমি বিশ্বাস করি এটি মূলত ব্যবহারকারীর স্টাইলশিটকে ওভাররাইড করার জন্য যা ব্রাউজারটির জন্য ডিফল্ট ছিল। আপনি যদি কোনও ধরণের সিএসএস ফাইলকে স্বাভাবিকায়ন বা পুনরায় সেট করতে ব্যবহার করেন তবে এটি প্রয়োজনীয় নয় কারণ এটি ইতিমধ্যে যত্ন নেওয়া হবে।

— জারেডুইলি

2

আপনি যদি পুনরায় আকার পরিবর্তন করতে বেশ আশা করেন; উদাহরণস্বরূপ একটি প্রতিকৃতি / ল্যান্ডস্কেপ ডিভাইসে, আপনি debounceআকার পরিবর্তন করতে চান অন্যথায় আপনি ব্রাউজারটি প্লাবিত করবেন।

— ডুবুর্ট

24

display: block: এটি কেবল স্ক্রোলবারগুলি সরিয়ে দেয় না, তবে এটি নথির বুকের উচ্চতা থেকে 2px সরিয়ে দেয় যা সাধারণত একটি ব্লকের অভ্যন্তরে পাঠ্য লাইনের অধীনে যুক্ত হয়। সুতরাং

— এটির

2

কোন jQuery জন্য প্লাস ওয়ান

— Flix Gagnon-Grenier

26

আপনি ভিউপোর্ট ইউনিটগুলি চেষ্টা করতে পারেন (সিএসএস 3):

canvas { 
  height: 100vh; 
  width: 100vw; 
  display: block;
}

— ভিটালীই ফেদোরেনকো
সূত্র

5

যোগ করুন display: block;এবং এটি কাজ করে।

— সুপারলুকাস

18

আমি এটি চেষ্টা করে দেখেছি যে ক্রোম এবং ফায়ারফক্সে, ক্যানভাসটি কেবলমাত্র পুরো ভিউপোর্টে প্রসারিত চিত্রটি দেখায়। এমনকি নতুন আঁকানো উপাদানগুলিও প্রসারিত হয়।

— ভিভিয়ান নদী

8

@ ড্যানিয়েল সঠিক - এই উত্তরটি ভুল । এটি ক্যানভাস প্রসঙ্গে অভ্যন্তরীণ মাত্রা সেট করবে না, বরং ডিওএম উপাদানটির মাত্রা। পার্থক্যের জন্য, সম্পর্কিত প্রশ্নের উত্তরটি দেখুন ।

— ড্যান ড্যাসক্লেস্কু

19

এই পদ্ধতিটি কাজ করে না, এটি পাঠ্যকে প্রসারিত করে। দুর্ভাগ্যক্রমে আপনার জেএস ব্যবহার করতে হবে।

— i336_

16

আমি কীভাবে ক্যানভাস আকারে উইন্ডো আকার পরিবর্তন করতে চাইলে গতিময়ভাবে আরও সাধারণ প্রশ্নের উত্তর দেব। গৃহীত উত্তর যথাযথভাবে হ্যান্ডল করে যেখানে প্রস্থ এবং উচ্চতা উভয়ই 100% হওয়ার কথা, যা এর জন্য জিজ্ঞাসা করা হয়েছিল, তবে এটি ক্যানভাসের দিক অনুপাতকেও পরিবর্তন করবে will অনেক ব্যবহারকারী উইন্ডো পুনরায় আকারে ক্যানভাসটিকে পুনরায় আকার দিতে চান তবে দিক অনুপাতটি অচ্ছুত রাখার সময়। এটি সঠিক প্রশ্ন নয়, তবে এটি "ফিট করে", কেবল প্রশ্নটিকে কিছুটা সাধারণ প্রসঙ্গে ফেলেছে।

উইন্ডোতে কিছু দিক অনুপাত (প্রস্থ / উচ্চতা) থাকবে এবং ক্যানভাস অবজেক্টটিও তাই হবে। আপনি কীভাবে এই দুটি দিক অনুপাত একে অপরের সাথে সম্পর্কিত করতে চান তা একটি বিষয় যা আপনার সম্পর্কে পরিষ্কার হতে হবে, সেই প্রশ্নের কোনও "এক আকার সবই মানায় না" - আপনি যা করতে পারেন তার কয়েকটি সাধারণ ক্ষেত্রে আমি যাব চাই।

আপনার সর্বাধিক গুরুত্বপূর্ণ বিষয় সম্পর্কে পরিষ্কার হতে হবে: এইচটিএমএল ক্যানভাস অবজেক্টের একটি প্রস্থের বৈশিষ্ট্য এবং উচ্চতার বৈশিষ্ট্য রয়েছে; এবং তারপরে একই বস্তুর CSS এর প্রস্থ এবং উচ্চতা বিশিষ্টতাও রয়েছে। এই দুটি প্রস্থ এবং উচ্চতা পৃথক, উভয়ই বিভিন্ন জিনিসের জন্য কার্যকর।

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

আমি উইন্ডো পুনরায় আকারে যা ঘটতে চাইবে তার 4 টি মামলা (সম্পূর্ণ পর্দার ক্যানভাস দিয়ে শুরু করা)

1: আপনি প্রস্থটি 100% বজায় রাখতে চান এবং আপনি চান অনুপাতটি যেমন ছিল তেমন থাকে। সেক্ষেত্রে আপনার ক্যানভাস পুনরায় আঁকার দরকার নেই; এমনকি আপনার উইন্ডো রাইজ হ্যান্ডলারের প্রয়োজন নেই। তোমার যা দরকার তা হল

$(ctx.canvas).css("width", "100%");

যেখানে সিটিএক্স হল আপনার ক্যানভাস প্রসঙ্গ context ফিডাল : রিসাইজবাইউইথ

2: আপনি উভয় প্রস্থ এবং উচ্চতা 100% থাকতে চান এবং আপনি দিক অনুপাতের ফলে পরিবর্তিত আকারের প্রসারিত চিত্রের প্রভাব দেখতে চান। এখন, আপনার এখনও ক্যানভাস পুনরায় আঁকার দরকার নেই, তবে আপনার উইন্ডোর পুনরায় আকার হ্যান্ডলারের প্রয়োজন। হ্যান্ডলারে, আপনি করেন

$(ctx.canvas).css("height", window.innerHeight);

ফিডল: জগাখিচির সাথে sp

3: আপনি উভয় প্রস্থ এবং উচ্চতা 100% থাকতে চান তবে দিক অনুপাতের পরিবর্তনের উত্তরটি চিত্রটিকে প্রসারিত করা থেকে আলাদা কিছু। তারপরে আপনাকে পুনরায় ছবি আঁকতে হবে এবং গ্রহণযোগ্য উত্তরে যেভাবে রূপরেখা দেওয়া হয়েছে সেভাবে করুন do

ভাজা: redraw

4: আপনি পৃষ্ঠা লোডে প্রস্থ এবং উচ্চতা 100% হতে চান তবে তারপরে অবিচ্ছিন্ন থাকুন (উইন্ডোর আকার পরিবর্তন করতে কোনও প্রতিক্রিয়া নেই)।

ভাঁজ: স্থির

মোড সেট করা আছে যেখানে লাইন 63 ব্যতীত সমস্ত ফিডলগুলির অভিন্ন কোড রয়েছে। আপনি আপনার স্থানীয় মেশিনে চলার জন্য ফিডল কোডটিও অনুলিপি করতে পারেন, সেক্ষেত্রে আপনি কোয়েরিস্ট্রিং আর্গুমেন্টের মাধ্যমে মোডটি নির্বাচন করতে পারেন, মোড = পুনরায় আঁকুন?

— mathheadinclouds
সূত্র

1

fyi: $(ctx.canvas).css("width", "100%");এর সমান $(canvas).css("width", "100%"); (প্রসঙ্গের ক্যানভাসটি কেবল ক্যানভাস)

— ব্র্যাড কেন্ট

@ ব্র্যাডকেন্ট আপনি যখন কোনও সহায়ক ফাংশন কল করেন যা "ক্যানভাস-জিনিসগুলি" করতে চান যা আপনি করতে চান, আপনি হয় তর্ক হিসাবে (যুক্ত) 1) ক্যানভাস অবজেক্টটি পাস করতে পারেন, ২) ক্যানভাস প্রসঙ্গটি পাস করতে পারেন, 3) উভয়ই। আমি 3 টি পছন্দ করি না), এবং এর ctx.canvasচেয়ে অনেক কম canvas.getContext('2d')- এই কারণেই আমি 2 করি)। অতএব, ক্যানভাস নামক কোনও ভেরিয়েবল নেই, তবে সিটিএক্স.ক্যানভাস রয়েছে। এখানেই সিটিএক্স.ক্যানভাস এসেছে।

— mathheadinclouds

9

http://jsfiddle.net/mqFdk/10/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

সিএসএস সহ

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

— nonopolarity
সূত্র

এটি কাজ করে, তবে এটি একটি নির্ধারিত প্রস্থ এবং উচ্চতা ছাড়াই আমার ক্যানভাস ছেড়ে দেয়। ক্যানভাসের প্রস্থ এবং উচ্চতা অবশ্যই আমি বিশ্বাস করি সেই উপাদানটির উপরে সংজ্ঞায়িত করা উচিত।

— অ্যারিক

@ অ্যারিক: না, এটির কাজ করার জন্য আপনার ক্যানভাস উপাদানটিতে একটি স্পষ্ট প্রস্থ / উচ্চতা স্থাপন করতে হবে না। এই কোডটি সূক্ষ্মভাবে কাজ করা উচিত।

— জন অ্যাডামস

18

আসলে হ্যাঁ, ক্যানভাস উপাদানগুলির একটি স্পষ্ট প্রস্থ / উচ্চতা সেট প্রয়োজন। এগুলি ছাড়াই তারা কিছু ব্রাউজারের প্রাক-সেট (ক্রোমে, আমি মনে করি এটি 300x150px) আকারে ডিফল্ট হয়। ক্যানভাসে সমস্ত অঙ্কন এই আকারে ব্যাখ্যা করা যায় এবং তারপরে ভিউপোর্টের আকারের 100% হয়ে যায়। আমি কী বলতে চাইছি তা দেখতে আপনার ক্যানভাসে কিছু আঁকার চেষ্টা করুন - এটি বিকৃত হবে।

— মার্ক ক্যান

আপনি যদি ক্যানভাসকে 100% প্রস্থ এবং উচ্চতা তৈরি করার চেষ্টা করছেন তবে তা মোটেই গুরুত্বপূর্ণ নয়। আপনি কেবল যাইহোক এটি আকার দিন

— jaredwilli

1

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

— jaredwilli

8

আমি এই প্রশ্নের উত্তরটিও সন্ধান করছিলাম, তবে স্বীকৃত উত্তরটি আমার জন্য ব্রেকিং ছিল। দৃশ্যত উইন্ডো। এটি কিছু ব্রাউজারে কাজ করে তবে আমি লক্ষ্য করেছি যে ফায়ারফক্স এটি পছন্দ করে না।

গ্রেগ টাভারেস এখানে একটি দুর্দান্ত সংস্থান পোস্ট করেছে যা এই সমস্যাটিকে সরাসরি সম্বোধন করে: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (অ্যান্টি-প্যাটার্ন # এর 3 এবং 4 দেখুন)।

উইন্ডো.নিরউইথের পরিবর্তে ক্যানভাস.ক্লিয়েন্টউইথ ব্যবহার করা ভালভাবে কাজ করছে বলে মনে হচ্ছে।

গ্রেগের প্রস্তাবিত রেন্ডার লুপটি এখানে:

function resize() {
  var width = gl.canvas.clientWidth;
  var height = gl.canvas.clientHeight;
  if (gl.canvas.width != width ||
      gl.canvas.height != height) {
     gl.canvas.width = width;
     gl.canvas.height = height;
     return true;
  }
  return false;
}

var needToRender = true;  // draw at least once
function checkRender() {
   if (resize() || needToRender) {
     needToRender = false;
     drawStuff();
   }
   requestAnimationFrame(checkRender);
}
checkRender();

— ডেভিড
সূত্র

2

(Answer answer answer answer ing answer answer answer answer answer answer

শরীরে ভরাট করার জন্য ক্যানভাসকে স্টাইল করুন। ক্যানভাসে রেন্ডার করার সময় এটির আকারটি বিবেচনা করুন।

http://jsfiddle.net/mqFdk/356/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

সিএসএস:

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

javascript:

function redraw() {
    var cc = c.getContext("2d");
    c.width = c.clientWidth;
    c.height = c.clientHeight;
    cc.scale(c.width, c.height);

    // Draw a circle filling the canvas.
    cc.beginPath();
    cc.arc(0.5, 0.5, .5, 0, 2*Math.PI);
    cc.fill();
}

// update on any window size change.
window.addEventListener("resize", redraw);

// first draw
redraw();

— ভিনসেন্ট শিয়েব
সূত্র

1

মোবাইলগুলির জন্য এটি ব্যবহার করা ভাল

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

কারণ এটি ওরিয়েন্টেশন পরিবর্তনের পরে ভুলভাবে প্রদর্শিত হবে the চিত্রটি ওরিয়েন্টেশন পরিবর্তন করার সময় "ভিউপোর্ট" বাড়ানো হবে full সম্পূর্ণ উদাহরণ দেখুন

— dzanis
সূত্র

এইচটিএমএল 5 ক্যানভাস ভিউপোর্টের 100% প্রস্থের উচ্চতা?

এইচটিএমএল

জাভাস্ক্রিপ্ট

সিএসএস