HTML canvas setTransform() နည်းလမ်း
ဥပမာ
ထောင့်မှန်စတုဂံတစ်ခုဆွဲပါ၊ ပြင်ဆင်သတ်မှတ်ပြီး setTransform() ဖြင့် အသွင်ပြောင်းမက်ထရစ်အသစ်တစ်ခုကို ဖန်တီးပါ၊ ထောင့်မှန်စတုဂံကို ထပ်မံဆွဲပါ၊ ပြန်လည်သတ်မှတ်ပြီး အသွင်ပြောင်းမက်ထရစ်အသစ်တစ်ခုကို ဖန်တီးပါ၊ ထို့နောက် စတုဂံကို ထပ်မံဆွဲပါ။ setTransform() ကို ခေါ်တိုင်း၊ ၎င်းသည် ယခင်ပြောင်းလဲခြင်း matrix ကို ပြန်လည်သတ်မှတ်ပြီး matrix အသစ်ကို တည်ဆောက်ပေးကြောင်း သတိပြုပါ ၊ ထို့ကြောင့် အောက်ဖော်ပြပါ ဥပမာတွင်၊ အပြာရောင်စတုဂံအောက်ရှိ အနီရောင်စတုဂံကို ပြမည်မဟုတ်ပါ။
JavaScript-
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် နည်းလမ်းကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ကင်းဗတ်ပေါ်ရှိ အရာတစ်ခုစီတွင် လက်ရှိအသွင်ပြောင်းလဲခြင်း matrix ရှိသည်။
setTransform() method သည် လက်ရှိ transformation ကို identity matrix သို့ ပြန်လည်သတ်မှတ်ပြီး တူညီသော အကြောင်းပြချက်များဖြင့် transform() ကို လုပ်ဆောင်သည်။
တစ်နည်းဆိုရသော် setTransform() method သည် သင့်အား အတိုင်းအတာ၊ လှည့်၊ ရွှေ့ကာ လက်ရှိအကြောင်းအရာကို လှည့်နိုင်စေပါသည်။
မှတ်ချက် ။
| JavaScript syntax- | ဆက်စပ် .setTransform( a,b,c,d,e,f ); |
|---|
ကန့်သတ်တန်ဖိုးများ
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ HTML Canvas အကိုးအကား