कैनवास घड़ी संख्या
भाग III - घड़ी की संख्याएँ बनाएँ
घड़ी को नंबर चाहिए। घड़ी की संख्या खींचने के लिए जावास्क्रिप्ट फ़ंक्शन बनाएं:
जावास्क्रिप्ट:
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";
प्रत्येक संख्या के लिए घुमाए गए त्रिज्या के 85% तक प्रिंट स्थिति (12 नंबरों के लिए) की गणना करें (पीआई / 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);
}