HTML canvas drawImage() နည်းလမ်း

အသုံးပြုရန်ပုံ-

အော်မယ်။

ဥပမာ

ပုံကို ကင်းဗတ်စ်ပေါ်တွင် ဆွဲပါ။

JavaScript-

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
};

Browser ပံ့ပိုးမှု

ဇယားရှိ နံပါတ်များသည် နည်းလမ်းကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

အဓိပ္ပါယ်နှင့် အသုံးပြုမှု

drawImage() နည်းလမ်းသည် ရုပ်ပုံ၊ ပတ္တူ သို့မဟုတ် ဗီဒီယိုကို ကင်းဗတ်ပေါ်တွင် ဆွဲသည်။

drawImage() နည်းလမ်းသည် ပုံတစ်ပုံ၏ အစိတ်အပိုင်းများကို ရေးဆွဲနိုင်ပြီး/သို့မဟုတ် ပုံအရွယ်အစားကို တိုး/လျှော့နိုင်သည်။

မှတ်ချက်- ပုံမတင်မီ drawImage() နည်းလမ်းကို သင်ခေါ်ဆို၍မရပါ။ ပုံအား တင်ထားကြောင်း သေချာစေရန်၊ သင်သည် window.onload() မှ drawImage() သို့မဟုတ် document.getElementById(" imageID ").onload မှခေါ်ဆိုနိုင်ပါသည်။

JavaScript Syntax

ပုံကို ကင်းဗတ်ပေါ်တွင် နေရာချပါ-

JavaScript syntax:	context.drawImage(img,x,y);

ပုံကို ကင်းဗတ်ပေါ်တွင် နေရာချပြီး ပုံ၏ အကျယ်နှင့် အမြင့်ကို သတ်မှတ်ပါ-

JavaScript syntax:	context.drawImage(img,x,y,width,height);

ပုံကိုညှပ်ပြီး ကင်းဗတ်ပေါ်တွင် ညှပ်ထားသောအပိုင်းကို နေရာချပါ-

JavaScript syntax:	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

ကန့်သတ်တန်ဖိုးများ

Parameter	Description	Play it
img	Specifies the image, canvas, or video element to use
sx	Optional. The x coordinate where to start clipping
sy	Optional. The y coordinate where to start clipping
swidth	Optional. The width of the clipped image
sheight	Optional. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional. The width of the image to use (stretch or reduce the image)
height	Optional. The height of the image to use (stretch or reduce the image)

နောက်ထပ် ဥပမာများ

ဥပမာ

ပုံကို ကင်းဗတ်ပေါ်တွင် နေရာချပြီး ပုံ၏ အကျယ်နှင့် အမြင့်ကို သတ်မှတ်ပါ-

JavaScript-

window.onload = function() {
  var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10, 150, 180);
};

ဥပမာ

ပုံကိုညှပ်ပြီး ကင်းဗတ်ပေါ်တွင် ညှပ်ထားသောအပိုင်းကို နေရာချပါ-

JavaScript-

window.onload = function() {
var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
};