API του Canvas

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

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

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

Προσθήκη 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();

Προσπάθησε το προσωπικά