ক্যানভাস drawImage() পদ্ধতি
সংজ্ঞা ও ব্যবহার
drawImage() পদ্ধতি চিত্রক্ষেত্রে চিত্র, চিত্রক্ষেত্র বা ভিডিও দ্রব্যাস করে。
drawImage() পদ্ধতি চিত্রের কোনও অংশকেও চিত্রক্ষেত্রে দ্রব্যাস করতে পারে এবং/অথবা চিত্রের পরিমাণ বৃদ্ধি কিংবা হ্রাস করতেও পারে。
ইনস্ট্যান্স
উদাহরণ 1
ব্যবহার্য চিত্র:
চিত্রক্ষেত্রের উপর চিত্র দ্রব্যাস করুন:
জেভাস্ক্রিপ্ট:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
তুলনা:পানের নিচে আরও উদাহরণ পাবেন。
গ্রামার
জেভাস্ক্রিপ্ট গ্রামার 1
চিত্রক্ষেত্রে চিত্রকে স্থানীয়করণ করুন:
context.drawImage(img,x,y);
জেভাস্ক্রিপ্ট গ্রামার 2
চিত্রক্ষেত্রে চিত্রকে স্থানীয়করণ এবং চিত্রের প্রস্থ এবং উচ্চতা নির্ধারণ করুন:
context.drawImage(img,x,y,width,height);
জেভাস্ক্রিপ্ট গ্রামার 3
ছেদ চিত্রকে চিত্রক্ষেত্রে স্থানীয়করণ এবং ছেদকৃত অংশকে চিত্রক্ষেত্রে স্থাপন করুন:
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
ক্যানভাসের উপর ছবিটিকে অবস্থান দিয়ে, এবং ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করুন:
জেভাস্ক্রিপ্ট:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
উদাহরণ 3
ছবি কাটে এবং ক্যানভাসের উপর কাটা অংশটিকে অবস্থান দেয়:
জেভাস্ক্রিপ্ট:
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
ব্যবহার্য ভিডিও (প্লে বাটন চাপে প্রদর্শন শুরু করুন):
ক্যানভাস:
জেভাস্ক্রিপ্ট (প্রতি 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);
ব্রাউজার সমর্থন
সারণীতে উল্লিখিত সংখ্যাগুলি প্রথম এই বৈশিষ্ট্যকে সম্পূর্ণভাবে সমর্থনকারী ব্রাউজারের সংস্করণকে নির্দেশ করে
| চ্রম | এজ | ফায়ারফক্স | সাফারি | অপেরা |
|---|---|---|---|---|
| চ্রম | এজ | ফায়ারফক্স | সাফারি | অপেরা |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
মন্তব্য:Internet Explorer 8 এবং তার পূর্ববর্তী সংস্করণ ক্যানভাস <canvas> উপাদানকে সমর্থন করে না。
