Canvas ঘড়ির সংখ্যা

তৃতীয় অংশ - ঘড়ির সংখ্যা আঁকা

ঘড়ির সংখ্যা প্রয়োজন।একটি JavaScript ফাংশন ঘড়ির সংখ্যা আঁকতে তৈরি করুন:

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

স্বয়ং প্রয়োগ করুন

কোড ব্যাখ্যা

ড্রাইভিং অবজেক্টের (রেখার) ফন্ট হাইপারসেট রেখার ১৫% হবে:

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 পরামর্শ হান্ডবুক