នាវាមួយរបស់ Canvas

আগামী অধ্যায়গুলিতে, আমরা HTML কার্টেজ ব্যবহার করে একটি মোডেল ঘড়ি তৈরি করব:

প্রথম অধ্যায় - কার্টেজ তৈরি করুন

ঘড়িকে একটি HTML কন্টেইনার চাই। HTML কার্টেজ তৈরি করুন:

HTML কোড:

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
}
</script>
</body>
</html>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

কোড ব্যাখ্যা

আপনার পাতায় HTML <canvas> ইলেকট্রনিক তারকা যোগ করুন:

<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>

একটি কার্টেজ অবজেক্ট (const canvas) তৈরি করুন:

const canvas = document.getElementById("canvas");

কার্টেজ অবজেক্টের জন্য 2d চিত্রনাট্য ব্যবহারকারী (const ctx) তৈরি করুন:

const ctx = canvas.getContext("2d");

কার্টেজের উচ্চতা ব্যবহার করে ঘড়ির ব্যাসার্ধ গণনা করুন:

let radius = canvas.height / 2;

সূচনা

ঘড়ির ব্যাসার্ধ কার্টেজের উচ্চতা ব্যবহার করে গণনা করুন, যাতে ঘড়ি সকল কার্টেজের মাপাক্ষে উপযুক্ত হয়:

চিত্রনাট্য ব্যবহারকারীর (0,0) অবস্থানকে কার্টেজের কেন্দ্রে পুনর্মান্য করুন:

ctx.translate(radius, radius);

ঘড়ির ব্যাসার্ধ হ্রাস করেন (90% পর্যন্ত), ঘড়িকে কার্টেজে আঁকুন:

radius = radius * 0.90;

ঘড়ি আঁকার ফাংশন তৈরি করুন:

function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
}

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册