ကင်းဗတ် နာရီနံပါတ်များ
အပိုင်း III - နာရီနံပါတ်များဆွဲပါ။
နာရီက နံပါတ်တွေလိုတယ်။ နာရီနံပါတ်များဆွဲရန် JavaScript လုပ်ဆောင်ချက်ကို ဖန်တီးပါ-
JavaScript-
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius * 0.15 + "px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
}
နမူနာရှင်းပြထားပါတယ်။
ဖောင့်အရွယ်အစား (ပုံဆွဲအရာဝတ္တု၏) အချင်းဝက်၏ 15% ကို သတ်မှတ်ပါ-
ctx.font = radius * 0.15 + "px arial";
စာသား ချိန်ညှိမှုကို ပုံနှိပ်ခြင်း၏ အလယ်နှင့် အလယ်တည့်တည့်တွင် သတ်မှတ်ပါ-
ctx.textBaseline = "middle";
ctx.textAlign = "center";
နံပါတ်တစ်ခုစီအတွက် လှည့်ထားသော (PI/6) ကို အချင်းဝက်၏ 85% (နံပါတ် 12 ခုအတွက်) ပရင့်အနေအထားကို တွက်ချက်ပါ-
for(num = 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}