ကင်းဗတ် နာရီမျက်နှာ
အပိုင်း II - နာရီမျက်နှာစာဆွဲပါ။
နာရီသည် နာရီမျက်နှာစာ လိုအပ်သည်။ နာရီမျက်နှာစာဆွဲရန် JavaScript လုပ်ဆောင်ချက်ကို ဖန်တီးပါ-
JavaScript-
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0, 0 ,radius * 0.95, 0, 0, radius * 1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
ကုဒ်ဖြင့် ရှင်းပြထားသည်။
နာရီမျက်နှာစာပုံဆွဲရန်အတွက် drawFace() လုပ်ဆောင်ချက်ကို ဖန်တီးပါ။
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}
အဖြူရောင်စက်ဝိုင်းကိုဆွဲပါ
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
အချင်းဝက်အရောင်ဖျော့ဖျော့ (မူရင်းနာရီအချင်းဝက်၏ 95% နှင့် 105% ) ကို ဖန်တီးပါ-
grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
arc ၏အတွင်း၊ အလယ်နှင့် အပြင်ဘက်အစွန်းတို့နှင့် ကိုက်ညီသော အရောင်မှတ်တိုင် 3 ခုကို ဖန်တီးပါ။
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
အရောင်ရပ်တန့်ခြင်းသည် 3D အကျိုးသက်ရောက်မှုကို ဖန်တီးသည်။
ပုံဆွဲအရာဝတ္တု၏ လေဖြတ်ခြင်းပုံစံအဖြစ် gradient ကို သတ်မှတ်ပါ-
ctx.strokeStyle = grad;
ပုံဆွဲအရာဝတ္ထု၏ မျဉ်းအကျယ်ကို သတ်မှတ်ပါ (အချင်းဝက်၏ 10%)။
ctx.lineWidth = radius * 0.1;
စက်ဝိုင်းကိုဆွဲပါ
ctx.stroke();
နာရီဗဟိုကိုဆွဲပါ
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();