Game Canvas

Προτεινόμενες Κurse:

HTML Canvas

<canvas> Το στοιχείο HTML <canvas> εμφανίζεται ως ορθογώνιο αντικείμενο στο διαδίκτυο:

<canvas> το στοιχείο παρέχει όλες τις λειτουργίες που χρειάζεστε για την δημιουργία παιχνιδιών.

Χρησιμοποιήστε το JavaScript στο <canvas> εικαστική ζωγραφική, γραφή κειμένου, εισαγωγή εικόνων κ.λπ.

.getContext("2d")

<canvas> ένα ενσωματωμένο αντικείμενο, ονομάζεται getContext("2d") το αντικείμενο, παρέχει μεθόδους και ιδιότητες για ζωγραφική.

Μπορείτε να βρείτε στο Canvas Εκμάθηση μαθαίνετε για <canvas> στοιχεία και getContext("2d") πληροφορίες για το αντικείμενο

τότε, ξεκινήστε

Για να δημιουργήσετε ένα παιχνίδι, πρώτα δημιουργήστε μια περιοχή παιχνιδιού και προετοιμάστε την για ζωγραφική:

πράγμα

function startGame() {
  myGameArea.start();
}
var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  }
}

δοκιμάστε το προσωπικά

Στη συνέχεια αυτού του εγχειριδίου, το αντικείμενο myGameArea θα αποκτήσει περισσότερες ιδιότητες και μεθόδους.

λειτουργία startGame(); καλέω myGameArea 对象的 start() method.

start() method created a <canvas> element, and inserted as the first child node to <body> within the element.