HTML ဂန္တူ အကျယ်အဝန်

အကြိမ်

150*100 ပမာဏ၏ အပေါ်အရိုးကို ဖြင့်လျှက်ရန်

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

亲自试一试

rect() စနစ်

rect() စနစ်သည် လမ်းကြောင်းတစ်ခုကို အပေါ်အရိုးတစ်ခုအား ထပ်ပေါင်းပြီးသတ်မှတ်ပြီးသည်

အုပ်စု

context.rect(x, y, width, height)

ပိုမိုအကြိမ်

အကြိမ်

သုံးပါးအပေါ်အရိုးပြုလုပ်ရန် rect() စနစ်ကိုသုံးပါ

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// လက်ဆုံးဆိုင်
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// အိမ်းအိုးဆိုင်
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// ကြီးနားဆိုင်
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();

亲自试一试

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册