HTML কার্টেস drawImage() পদ্ধতি
সংজ্ঞা ও ব্যবহার
drawImage() কার্টেসের উপর চিত্র আঁকা, কার্টেস বা ভিডিও
drawImage() পদ্ধতি ছবির কোনও অংশকেও পিন্না করতে পারে, এবং/বা ছবির মাপ বৃদ্ধি করা বা হ্রাস করা করতে পারে।
উদাহরণ
উদাহরণ 1
ব্যবহারযোগ্য ছবি:
ক্যানভাসের উপর ছবি পিন্না করুন:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
সুঝানা:পানের নিচে আরও উদাহরণ পাবেন
গঠনশৈলী
JavaScript ১-এর গঠনশৈলী
ক্যানভাসের উপর ছবিটিকে স্থানান্তরিত করুন:
context.drawImage(img,x,y);
JavaScript ২-এর গঠনশৈলী
ক্যানভাসের উপর ছবিটিকে স্থানান্তরিত করুন এবং ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করুন:
context.drawImage(img,x,y,width,height);
JavaScript ৩-এর গঠনশৈলী
ছবি কাটা এবং ক্যানভাসের উপর কাটা অংশটিকে স্থানান্তরিত করুন:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
পারামিটার মান
| পারামিটার | বর্ণনা |
|---|---|
| img | ব্যবহারযোগ্য ছবি, ক্যানভাস বা ভিডিও。 |
| sx | বাছাইযোগ্য। কাটা স্থানের x-অক্ষ স্থান。 |
| sy | বাছাইযোগ্য। কাটা স্থানের y-অক্ষ স্থান。 |
| swidth | বাছাইযোগ্য। কাটা ছবির প্রস্থ。 |
| sheight | বাছাইযোগ্য। কাটা ছবির উচ্চতা。 |
| x | ক্যানভাসের উপর ছবিটিকে স্থানান্তরিত করার x-অক্ষ স্থান。 |
| y | ক্যানভাসের উপর ছবিটিকে স্থানান্তরিত করার y-অক্ষ স্থান。 |
| width | বাছাইযোগ্য। ব্যবহারযোগ্য ছবির প্রস্থ। (ছবিটিকে সমস্তৃতি করা বা চুম্বককরণ): |
| height | বাছাইযোগ্য। ব্যবহারযোগ্য ছবির উচ্চতা। (ছবিটিকে সমস্তৃতি করা বা চুম্বককরণ): |
আরও উদাহরণ
উদাহরণ 2
ক্যানভাসের উপর ছবিটিকে স্থানান্তরিত করুন এবং ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করুন:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
উদাহরণ 3
ছবি কাটা এবং ক্যানভাসের উপর কাটা অংশটিকে স্থানান্তরিত করুন:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);
উদাহরণ 4
ব্যবহারযোগ্য ভিডিও (প্লে বাটন চাপানোর মাধ্যমে ডেমো শুরু করুন):
ক্যানভাস:
JavaScript (প্রতি 20 মিলিসেকেন্ডে, কোড ভিডিওর বর্তমান ফ্রেম পিন্না হবে):
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()}
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
ব্রাউজার সমর্থন
সারণীতে সংখ্যা এই বৈশিষ্ট্যটি যে প্রথম সম্পূর্ণরূপে সমর্থন করেছে একটি ব্রাউজারের সংস্করণ উল্লেখ করা হয়েছে。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
মন্তব্য:Internet Explorer 8 এবং তার পূর্ববর্তী সংস্করণ HTML <canvas> ইলেকট্রন সমর্থন করে না。
