Canvas API

<canvas> အရာ ကို ကင်တာ အချက်အလက် အပေါ် ပုံသဏ္ဍာထက်သည်း ပုံပြင် အား သတ်မှတ်ပါ:

ကင်တာ အပိုင်းအခြာ အသုံးပြုရန် ဂျွန်စ်စ် ကို အသုံးပြုရန် ပုံပြင် အပေါ် ပုံစံများ လွှမ်းမိုးနိုင်ပါသည်。

ကင်တာ အပိုင်းအခြာ အသုံးပြုရန် ပုံသဏ္ဍာထက်သည်းပုံပြင်အား ဖြင့် ပုံစံ၊ ပန်းခြည်၊ ဝှေ့မှုကြီး၊ ပုံစံအရာ၊ အရာများ၊ ပုံများ၊ အရောင်၊ အရောင်သွားအား၊ အရောင်တူအား နှင့် အခြား ပုံစံ အသုံးပြုနိုင်ပါသည်。

ကင်တာ အရာ အသုံးပြုရန် HTML စာကြိုး အရာများ အတွင်း မည်သည့် နေရာမဆို ထိန်းသိမ်းပါ:

ကင်တာ အချက်အလက် အသုံးပြုရန် <canvas> အချက်အလက် အသုံးပြုပါ:

အမျိုးအစား

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

ကိုယ်တိုင် စမ်းသပ်ပါ။

ကင်တာ အရာကို သို့ လာရန်လိုသည်

ကင်တာ ပြောင်းထုတ်ပုံနှင့် အသုံးပြုရန် မည်သည့် အရာမဆို <canvas> အရာကို သတ်မှတ်ရန် getElementById() စက္ခုများကို အသုံးပြုပါ:

const myCanvas = document.getElementById("myCanvas");

ရိုက်ခတ်အရေးအချိန်ကို အစားထိုးသို့မဟုတ် ကိုင်တွယ်ပါ

const ctx = myCanvas.getContext("2d");

အစီရင်ခံ

HTML <canvas> အစားထိုးပါ

အခုအခါ အချင်းတစ်ဦးက အချင်းတစ်ဦးအား ရေးဆွဲပြီး အစားထိုးပါ

getContext() စကားရပ်ကို အစားထိုးသို့မဟုတ် ကိုင်တွယ်ပါ။

ရိုက်ခတ်အရေးအချိန်ကို အစားထိုးပါ

2D အရေးအချိန် အားစားပွားအားပေးပြီး လူကြီးများက ရေးဆွဲပြီး အစားထိုးပါ

အောက်ဆုံး fillRect() စကားရပ်ကို အကြီးအကျယ် အရေးအချိန် အဆင်းအတန်း အမှတ် 20,20 တွင် ဖြင့်လျှောက်ပါ။ အရေးအချိန် 150 ပမာဏ်ငွေ့ အဆင်းအတန်း 100 ပမာဏ်ငွေ့ ဖြင့် ဖြင့်လျှောက်ပါ။

အမျိုးအစား

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

ကိုယ်တိုင် စမ်းသပ်ပါ။

အရေးအချိန်ကို အသုံးပြုပါ

fillStyle အရေးအချိန်ကို အစားထိုးသို့မဟုတ် ကိုင်တွယ်ပါ။

အမျိုးအစား

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

ကိုယ်တိုင် စမ်းသပ်ပါ။

အခုအခါ အသုံးပြုနိုင်သော document.createElement() စကားရပ်ကို အသုံးပြု၍ အခုအခါ အသုံးပြုနိုင်သော <canvas> အစားထိုးပါ

အမျိုးအစား

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

ကိုယ်တိုင် စမ်းသပ်ပါ။

createPattern()

လူကြီးများက လူကြီးတစ်ဦးအား ရေးဆွဲပြီး အစားထိုးပါ

1. လမ်းကြောင်းကို စတင်ပါ - beginPath()
2. တစ်ခုခုတွင် ပြောင်းရွှေ့ပါ - moveTo()
3. လမ်းကြောင်းတွင် ဖြင့်လျှောက်ပါ - lineTo()
4. လမ်းကြောင်းကို ဖြင့်လျှောက်ပါ - stroke()

အမျိုးအစား

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

ကိုယ်တိုင် စမ်းသပ်ပါ။