कैनवास घड़ी हाथ

❮ पहले का अगला ❯

भाग IV - घड़ी की सूइयां बनाएं

घड़ी को हाथ चाहिए। घड़ी की सूइयां खींचने के लिए JavaScript फ़ंक्शन बनाएं:

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

function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}

function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
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 = (minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
  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);
}

उदाहरण समझाया गया

घंटे, मिनट, सेकंड प्राप्त करने के लिए दिनांक का उपयोग करें:

var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var 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);

मिनट और सेकंड के लिए एक ही तकनीक का प्रयोग करें।

ड्राहैंड () रूटीन को स्पष्टीकरण की आवश्यकता नहीं है। यह केवल दी गई लंबाई और चौड़ाई के साथ एक रेखा खींचता है।

❮ पहले का अगला ❯