कैनवस घड़ी स्केल

चौथा भाग - घड़ी के हाथ को ड्रा करना

घड़ी के हाथ की गोलाई की जरूरत है। एक जावास्क्रिप्ट फ़ंक्शन बनाएं जो घड़ी के हाथ को ड्रा करे:

जावास्क्रिप्ट:

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}
function drawTime(ctx, radius) {
  const now = new Date();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  // घंटा
  hour = hour%12;
  hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
  drawHand(ctx, hour, radius*0.5, radius*0.07);
  // मिनट
  minute = (minute*Math.PI/30)+(second*Math.PI/(30*60));
  drawHand(ctx, minute, radius*0.8, radius*0.07);
  // सेकंड
  second = (second*Math.PI/30);
  drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0,0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-pos);
}

अपने आप प्रयोग करें

कोड व्याख्या

दूरी तथा मिनट और सेकंड प्राप्त करने के लिए एक Date ऑब्जेक्ट बनाएं:

const now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();

घड़ी के हाथ के कोण की गणना करें और इसकी लंबाई (व्यास का 50%) और चौड़ाई (व्यास का 7%) को ड्रा करें:

hour = hour%12;
hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);

उसी प्रौद्योगिकी का उपयोग घड़ी के हाथ और सेकंड के हाथ को ड्रा करने के लिए किया जाता है।

drawHand() प्रक्रिया को स्पष्टीकरण नहीं की जाती। यह निर्धारित लंबाई और चौड़ाई की लाइन ड्रा करती है।

अन्य संदर्भ:

CodeW3C.com का पूरा Canvas रेफरेंस मैनुअल