Χρονοσκαμμήλες 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();
}

Παρακαλώ δείτε επίσης:

Πλήρες Εγχειρίδιο Αναφορών Canvas CodeW3C.com