Canvas ঘড়ি সংখ্যা

দ্বিতীয় অংশ - ঘড়ির মুখ আঁকা

ঘড়িকে ঘড়ির মুখ দিতে হবে। একটি জেভাস্ক্রিপ্ট ফাংশন তৈরি করুন যাতে ঘড়ির মুখ আঁকা যায়:

জেভাস্ক্রিপ্ট:

function drawClock() {
  drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
  const grad = ctx.createRadialGradient(0, 0 ,radius * 0.95, 0, 0, radius * 1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

আপনার হাতে প্রয়োগ করুন

কোড ব্যাখ্যা

একটি drawFace() ফাংশন তৈরি করুন যাতে ঘড়ির মুখ আঁকা যায়:

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

সাদা বৃত্ত আঁকুন:

ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();

অর্ধচন্দ্রক গম্ভীরতা তৈরি করুন (মূল ঘড়ির প্রায় ৯৫% এবং ১০৫%):

grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

৩টি রংবিন্যাস তৈরি করুন যা বৃত্তের আঙ্গুলের ভিতর, মধ্য এবং বাইরের স্তরের সাথে সমান্তরাল:

grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');

সুচিত বলা হয়েছে: এই তিনটি রংবিন্যাস তিনটি স্তরের ৩ডি প্রভাব তৈরি করতে পারে।

অভিন্নতা নির্ধারণ করুন চিত্রকলার লেখালেখার পক্ষকাঠিন্য:

ctx.strokeStyle = grad;

চিত্রকলার লেখালেখার পক্ষকাঠিন্য নির্ধারণ করুন (রেখার প্রায় ১০%):

ctx.lineWidth = radius * 0.1;

বৃত্ত আঁকুন:

ctx.stroke();

রংহন্না কেন্দ্র দ্রষ্টব্য করুন:

ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();

অন্যান্য দেখুন:

CodeW3C.com-এর সম্পূর্ণ Canvas পরামর্শ হান্ডবুক