कैनवस घड़ी नंबर

तीसरा भाग - हार्डवेयर अंक ड्रा करना

हार्डवेयर को अंक चाहिए।एक जावास्क्रिप्ट फ़ंक्शन बनाएं जो हार्डवेयर अंक ड्रा करे:

JavaScript:

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
}
function drawNumbers(ctx, radius) {
  ctx.font = radius * 0.15 + "px arial";
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  for(let num = 1; num < 13; num++){
    let 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";

किसी प्रिंटिंग स्थान (12 अंक) को दूरी का 85% तक गिना और हर अंक को (PI/6) घुमाया जाएगा:

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);
}

अन्य संदर्भ:

कोडडब्ल्यू3सी.कॉम का पूरा कैनवस रेफरेंस मैनुअल