ساعت Canvas
- صفحه قبل تصاویر 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>
توضیح کد:
افزودن عنصر <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();
{}
لطفاً به: مراجعه کنید
- صفحه قبل تصاویر Canvas
- صفحه بعدی صفحه ساعت
