کانواس کلک

در بخش‌های بعدی، ما از کانواس 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>

آزمایش کنید

توضیح کد

افزودن عنصر <canvas> HTML به صفحه شما:

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

دیگر دیکھئے:

کدوو3سی کام سائٹ کا پورا کانواس مراجع