Canvas క్లాక్ నంబర్

మూడవ భాగం - గంటల సంఖ్యలను చేర్చడం

గంటలు సంఖ్యలు అవసరం. గంటలు సంఖ్యలను చేర్చడానికి జావాస్క్రిప్ట్ ఫంక్షన్ సృష్టించండి:

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

స్వయంగా ప్రయత్నించండి

కోడ్ వివరణ

చిత్రం ముగ్గురు సంఖ్యల స్థానాన్ని వెంటాన్ని గుర్రంతో ఉంచి ప్రతి సంఖ్యకు (PI/6) చూపు ఇవ్వాలి:

ctx.font = radius * 0.15 + "px arial";

ముగ్గురు సంఖ్యల స్థానాన్ని మధ్యం మరియు కేంద్రంలో ముగ్గురు సంఖ్యల స్థానాన్ని స్థాపించండి:

ctx.textBaseline = "middle";
ctx.textAlign = "center";

ముగ్గురు సంఖ్యల స్థానాన్ని వెంటాన్ని గుర్రంతో ఉంచి ప్రతి సంఖ్యకు (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);
}

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册