HTML Canvas ပုံပေါင်း

အက်စ်နယူ

ဘာသာစကား လုပ်ငန်း ကောင်းကောင်း

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

亲自试一试

Canvas အော်ဒါ ပုံအသား

အော်ဒါ အရ ပုံအသား ကို ဖြတ်သန်း ရန်

အမှုဆောင်

beginPath() အမှုဆောင် အရ ပုံအသား ကို သတ်မှတ် ရန်

moveTo() အမှုဆောင် အရ ပုံအသား ကို သတ်မှတ် ရန်

lineTo() အမှုဆောင် အရ ပုံအသား ကို သတ်မှတ် ရန်

stroke() အမှုဆောင် အရ ပုံအသား ကို ဖြတ်သန်း ရန်

ပိုမို ဘာသာစကား လုပ်ငန်း

ဘာသာစကား လုပ်ငန်း ကောင်းကောင်း

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

亲自试一试

ဘာသာစကား လုပ်ငန်း ကောင်းကောင်း

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

亲自试一试

အကြောင်းအရာ

အကွက် ကို ပြန်လည် ပြန်ရန် လို့ မရှိ ပါ။

နောက်ဆုံး အခန်း တွင် drawRect() ပုံပေါင်း ကို ပြန်လည် ဖော်ပြ ရန် အမှုဆောင်

strokeStyle အကွက်

strokeStyle အကွက် ကို ချင် ရန် အသုံးပြု သော အော်ဒါ အမျိုးအစား ကို သတ်မှတ်ပါ။

အခြား ကိစ္စ ကို ခေါ်ဆိုချက် အခါ stroke() အပြီးအခံ ပြင်ဆင်ချက် အခါ ထိုကိစ္စ ကို ကျွန်ုပ် ကျသော အချက်အလက် အဖြစ် သတ်မှတ်ပါ။

အက်စ်နယူ

ctx.beginPath();
// ပုံပေါင်း
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// ပုံပေါင်းချင်း
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "ချယ်ဖြူ";
ctx.stroke();

亲自试一试

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册