Το αντικείμενο Canvas του HTML DOM

Το στοιχείο <canvas> ορίζει την περιοχή bitmap της σελίδας HTML.

Το API Canvas επιτρέπει στο JavaScript να σχεδιάσει γραφήματα στο πίνακα.

Το API Canvas μπορεί να σχεδιάσει σχήματα, γραμμές, καμπύλες, πλαίσια, κείμενο και εικόνες, καθώς και χρώματα, γυροσκόπηση, διαφάνεια και άλλες δράσεις pixel.

Προσθήκη Canvas στο HTML

Μπορείτε να προσθέσετε στοιχείο canvas σε οποιαδήποτε θέση της σελίδας HTML χρησιμοποιώντας την ετικέτα <canvas>:

Παράδειγμα

<canvas id="myCanvas" width="300" height="150"></canvas>

Προσπαθήστε το個人τικά

Πώς να προσέξετε το στοιχείο Canvas

Μπορείτε να χρησιμοποιήσετε τη μέθοδο HTML DOM getElementById() για να προσέξετε το στοιχείο <canvas>:

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

Για να σχεδιάσετε στον καμβά, πρέπει να δημιουργήσετε ένα αντικείμενο 2D περιβάλλοντος γραφιδίου:

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

Σημειώσεις

Το στοιχείο HTML <canvas> δεν έχει λειτουργίες γραφιδίου.

Πρέπει να χρησιμοποιήσετε το JavaScript για να σχεδιάσετε οποιοδήποτε σχήμα.

Η μεθοδος getContext() επιστρέφει ένα αντικείμενο που έχει εργαλεία γραφιδίου (μεθόδους).

Σχεδιασμός στον καμβά

Μετά τη δημιουργία του αντικειμένου 2D περιβάλλοντος γραφιδίου, μπορείτε να σχεδιάσετε στον καμβά.

Η μεθοδος fillRect() έχει σχεδιαστεί για να σχεδιάσει ένα μαύρο δομικό παραθύρο, το οποίο βρίσκεται στη θέση 20,20. Το παραθύρο έχει πλάτος 150 pixel και ύψος 100 pixel:

Παράδειγμα

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Προσπαθήστε το個人τικά

Χρησιμοποιώντας χρώμα

Η ιδιότητα fillStyle καθορίζει το χρώμα γεμίσματος του αντικειμένου γραφιδίου:

Παράδειγμα

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Προσπαθήστε το個人τικά

Μπορείτε επίσης να χρησιμοποιήσετε το document.createElement() για να δημιουργήσετε ένα νέο στοιχείο <canvas> και να το προσθέσετε στην υπάρχουσα σελίδα HTML:

Παράδειγμα

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Προσπαθήστε το個人τικά

Δρομολόγιο

Συχνές μεθόδους για την καλλιγραφία στο καμβά είναι:

1. Έναρξη διαδρομής - beginPath()
2. Μετακίνηση σε έναν σημείο - moveTo()
3. Σχεδίαση στο μοτίβο - lineTo()
4. Διατύπωση διαδρομής - stroke()

Παράδειγμα

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Προσπαθήστε το個人τικά