HTML5 এ ক্যানভাস প্রস্থ এবং উচ্চতা

Question

এইচটিএমএল 5 canvasউপাদানের প্রস্থ এবং উচ্চতা ঠিক করা কি সম্ভব ?

স্বাভাবিক উপায় নিম্নলিখিত:

<canvas id="canvas" width="300" height="300"></canvas>

Answer 1

canvasDOM উপাদান রয়েছে .heightএবং .widthকরতে বৈশিষ্ট্য যে মিলা height="…"এবং width="…"বৈশিষ্ট্যাবলী। আপনার ক্যানভাসের আকার পরিবর্তন করতে জাভাস্ক্রিপ্ট কোডে সংখ্যাসূচক মানগুলিতে সেট করুন। উদাহরণ স্বরূপ:

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

নোট করুন যে এটি ক্যানভাস সাফ করে, যদিও ক্যানভাস ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);পুরোপুরি সাফ না করে এমন ব্রাউজারগুলি পরিচালনা করতে আপনার অনুসরণ করা উচিত । আকার পরিবর্তনের পরে আপনাকে যে কোনও সামগ্রী প্রদর্শিত হবে তা পুনরায় আঁকতে হবে।

আরও নোট করুন যে উচ্চতা এবং প্রস্থ হ'ল অঙ্কনের জন্য ব্যবহৃত লজিকাল ক্যানভাস মাত্রা এবং সিএসএস বৈশিষ্ট্যগুলি থেকে পৃথক । আপনি যদি সিএসএসের বৈশিষ্ট্যগুলি সেট না করেন তবে ক্যানভাসের অভ্যন্তরীণ আকারটি এর প্রদর্শনের আকার হিসাবে ব্যবহৃত হবে; আপনি যদি সিএসএস বৈশিষ্ট্যগুলি সেট করেন এবং সেগুলি ক্যানভাসের মাত্রা থেকে পৃথক হয় তবে আপনার সামগ্রী ব্রাউজারে স্কেল করা হবে। উদাহরণ স্বরূপ:style.heightstyle.width

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width  = '800px';
canvas.style.height = '600px';

4x দ্বারা জুম করা ক্যানভাসের এই লাইভ উদাহরণটি দেখুন ।

var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth   = 1;
ctx.strokeStyle = '#f00';
ctx.fillStyle   = '#eff';

ctx.fillRect(  10.5, 10.5, 20, 20 );
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.fillRect(   40, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.fillRect(   70, 10, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

ctx.strokeStyle = '#fff';
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

body { background:#eee; margin:1em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }

<canvas width="100" height="40"></canvas>
<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>

Comments

@ হাযার্ট আপনি যদি এগুলি আলাদাভাবে সেট করতে চান: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});আপনি যদি ভিজ্যুয়াল আকারটি পিক্সেল আকারের সমান হতে চান তবে শৈলীগুলি কখনও সেট করবেন না, কেবলমাত্র বৈশিষ্ট্যগুলি।

— ফোগজ

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

— ইংরাজএডাম

@ গেমোরাইজ: সিএসএসের মাধ্যমে জুম করা এটি ঝাপসা করে তোলে। যাইহোক, আপনি প্রতিটি বস্তুর 'আকার' পরিবর্তন না করে redrawing এর মধ্যে প্রসঙ্গের স্কেলিং এবং অনুবাদ দিয়ে জুম করতে পারেন।

— ফ্রোগজ

থেক্স অনেক প্রশংসা করেছেন। আমি এখন দেখছি যে সিএসএস কী করছে ... এটি ক্যানভাসের সাথে 'ইমেজ'র মতো আচরণ করে, একটি চিত্রকে স্কেলিং করা স্পষ্টতই এটি' পুনরায় অঙ্কন 'করার মতো ভাল নয়!

— ইংলিশএডাম

এছাড়াও, আপনি এখন ক্যানভাসে "ইমেজ-রেন্ডারিং: পিক্সिलेটেড" স্টাইল ব্যবহার করে কমপক্ষে Chrome এ "অস্পষ্ট পিক্সिलेটেড জুম-ইন" এর পরিবর্তে "ক্লাস পিক্সেলেটেড জুম-ইন" করতে পারেন। পার্থক্যটি দেখানোর জন্য আমি আপনার ফিডল বেঁধে দিয়েছি

— ডন হ্যাচ

Answer 2

একটি ক্যানভাসের 2 টি আকার রয়েছে, ক্যানভাসে পিক্সেলের মাত্রা রয়েছে (এটি ব্যাকিংস্টোর বা ড্রইংবফার) এবং প্রদর্শন আকার। পিক্সেল সংখ্যা ক্যানভাস বৈশিষ্ট্য ব্যবহার করে সেট করা হয়। এইচটিএমএলে

<canvas width="400" height="300"></canvas>

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

someCanvasElement.width = 400;
someCanvasElement.height = 300;

এর থেকে পৃথক হ'ল ক্যানভাসের সিএসএস স্টাইলের প্রস্থ এবং উচ্চতা

সিএসএসে

canvas {  /* or some other selector */
   width: 500px;
   height: 400px;
}

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

canvas.style.width = "500px";
canvas.style.height = "400px";

ক্যানভাস 1x1 পিক্সেল তৈরির পক্ষে যুক্তিযুক্ত সর্বোত্তম উপায় হ'ল সিএসএস ব্যবহার করার জন্য সিএসএস ব্যবহার করুন এবং তারপরে পিক্সেলের সংখ্যার সাথে সামঞ্জস্য করার জন্য একটি ছোট্ট জাভাস্ক্রিপ্ট লিখুন।

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

কেন এটি সেরা উপায়? কারণ এটি কোনও কোড পরিবর্তন না করে বেশিরভাগ ক্ষেত্রেই কাজ করে।

এখানে একটি পূর্ণ উইন্ডো ক্যানভাস:

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);
 
  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width / spacing + 1;
  const down = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y < down; ++y) {
    for (let x = 0; x < across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

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

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

এবং এখানে একটি অনুচ্ছেদে ভাসা হিসাবে ক্যানভাস's

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);
 
  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width  / spacing + 1;
  const down   = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y <= down; ++y) {
    for (let x = 0; x <= across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

span { 
   width: 250px; 
   height: 100px; 
   float: left; 
   padding: 1em 1em 1em 0;
   display: inline-block;
}
canvas {
   width: 100%;
   height: 100%;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim <span class="diagram"><canvas id="c"></canvas></span>
vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
<br/><br/>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>

একটি বিশাল নিয়ন্ত্রণ প্যানেলে একটি ক্যানভাস এখানে

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);

  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width / spacing + 1;
  const down = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y < down; ++y) {
    for (let x = 0; x < across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

// ----- the code above related to the canvas does not change ----
// ---- the code below is related to the slider ----
const $ = document.querySelector.bind(document);
const left = $(".left");
const slider = $(".slider");
let dragging;
let lastX;
let startWidth;

slider.addEventListener('mousedown', e => {
 lastX = e.pageX;
 dragging = true;
});

window.addEventListener('mouseup', e => {
 dragging = false;
});

window.addEventListener('mousemove', e => {
  if (dragging) {
    const deltaX = e.pageX - lastX;
    left.style.width = left.clientWidth + deltaX + "px";
    lastX = e.pageX;
  }
});

body { 
  margin: 0;
}
.frame {
  display: flex;
  align-items: space-between;
  height: 100vh;
}
.left {
  width: 70%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}  
canvas {
  width: 100%;
  height: 100%;
}
pre {
  padding: 1em;
}
.slider {
  width: 10px;
  background: #000;
}
.right {
  flex 1 1 auto;
}

<div class="frame">
  <div class="left">
     <canvas id="c"></canvas>
  </div>
  <div class="slider">
  
  </div>
  <div class="right">
     <pre>
* controls
* go 
* here

&lt;- drag this
     </pre>
  </div>
</div>

পটভূমি হিসাবে এখানে একটি ক্যানভাস

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);
 
  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width / spacing + 1;
  const down = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y < down; ++y) {
    for (let x = 0; x < across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

body { margin: 0; }
canvas { 
  display: block; 
  width: 100vw; 
  height: 100vh;  
  position: fixed;
}
#content {
  position: absolute;
  margin: 0 1em;
  font-size: xx-large;
  font-family: sans-serif;
  font-weight: bold;
  text-shadow: 2px  2px 0 #FFF, 
              -2px -2px 0 #FFF,
              -2px  2px 0 #FFF,
               2px -2px 0 #FFF;
}

<canvas id="c"></canvas>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
</p>
<p>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>
</div>

কারণ আমি বৈশিষ্ট্যগুলি সেট করি নি যা প্রতিটি নমুনায় পরিবর্তিত হয় কেবল সিএসএস (যতক্ষণ না ক্যানভাস সম্পর্কিত)

মন্তব্য:

• ক্যানভাস উপাদানটিতে সীমানা বা প্যাডিং রাখবেন না। উপাদানটির মাত্রা সংখ্যা থেকে বিয়োগ করতে আকারের গণনা করা সমস্যাজনক

Comments

সেরা উত্তর, এই স্নিপেটটি একটি স্ট্যান্ডার্ড ডিওএম ক্যানভাস পদ্ধতি হওয়া উচিত।

— rustypaper

Answer 3

আপনাকে অনেক ধন্যবাদ! অবশেষে আমি এই কোড দিয়ে অস্পষ্ট পিক্সেল সমস্যাটি সমাধান করেছি:

<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>

'হাফ-পিক্সেল' যুক্ত করার সাথে সাথে লাইনগুলি আনব্লু করার কৌশলটি ঘটায়।

Comments

@UpTheCreek আপনি যদি ক্যানভাসে একটি লাইন আঁকেন, এটি টিকার দেখায় তবে এটি হওয়া উচিত, যেন এটি ঝাপসা। অর্ধ পিক্সেলগুলিতে রেখাগুলি স্থাপন করে (বলুন, 50 এর পরিবর্তে 50.5) আপনি একটি সুন্দর, পরিষ্কার লাইন পাবেন। এটি প্রায়শই আপনার কোডের একেবারে শুরুতে ctx.translate (0.5, 0.5) ব্যবহার করে করা হয় যাতে আপনি এটির পরে ভুলে যেতে পারেন

— জোহান

Answer 4

এটি করার সর্বোত্তম উপায়:

<canvas id="myChart" style="height: 400px; width: 100px;"></canvas>