HTML canvas createImageData() μέθοδος

Εγχειρίδιο HTML5 Canvas

Ορισμός και χρήση

createImageData() Μέθοδος δημιουργίας νέου κενého αντικειμένου ImageData. Ο προεπιλεγμένος τύπος像素 είναι διαφανής μαύρος.

Για κάθε πίξελ του αντικειμένου ImageData, υπάρχουν τέσσερις πληροφορίες, δηλαδή οι τιμές RGBA:

  • R - κόκκινο (0-255)
  • G - πράσινο (0-255)
  • B - μπλε (0-255)
  • A - alpha χρώμα (0-255; 0 είναι διαφανές, 255 είναι πλήρως ορατό)

Επομένως, το διαφανές μαύρο σημαίνει (0,0,0,0).

Το color/alpha υπάρχει σε μορφή πίνακα και既然 ο πίνακας περιέχει τέσσερα στοιχεία για κάθε pixel, ο πίνακας είναι τετραπλάσιος του αντικειμένου ImageData. (Υπάρχει πιο απλός τρόπος για να βρείτε το μέγεθος του πίνακα, χρησιμοποιώντας ImageDataObject.data.length)

Ο πίνακας που περιέχει τις πληροφορίες color/alpha αποθηκεύεται στο αντικείμενο ImageData του data ιδιότητες.

Συμβουλή:Μετά την ολοκλήρωση της επεξεργασίας των πληροφοριών color/alpha στο πίνακα, μπορείτε να χρησιμοποιήσετε putImageData() Η μέθοδος αντιγράφει τα δεδομένα εικόνας πίσω στο canvas.

Παράδειγμα:

Αυτή η γλώσσα γραμματοσειράς κάνει τον πρώτο pixel του αντικειμένου ImageData κόκκινο:

imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

Αυτή η γλώσσα γραμματοσειράς κάνει τον δεύτερο pixel του αντικειμένου ImageData κόκκινο:

imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

Παράδειγμα

Δημιουργήστε αντικείμενο ImageData 100*100 pixel, όπου κάθε pixel είναι κόκκινο και τοποθετήστε το στο canvas:

Ο περιηγητής σας δεν υποστηρίζει το ετικέτα HTML5 canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData =ctx.createImageData(100, 100);
για (var i = 0; i < imgData.data.length; i += 4)
  {
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
  }
ctx.putImageData(imgData, 10, 10);

Προσπαθήστε να το δοκιμάσετε προσωπικά

Γλώσσα γραμματοσειράς

Υπάρχουν δύο εκδόσεις της μεθόδου createImageData():

1. Δημιουργία νέου ImageData αντικειμένου με το καθορισμένο μέγεθος (σε pixel):

var imgData=context.createImageData(width,height);

2. Δημιουργία νέου ImageData αντικειμένου με το ίδιο μέγεθος με το άλλο ImageData αντικείμενο που καθορίζεται (δεν θα αντιγράψει τα δεδομένα εικόνας):

var imgData=context.createImageData(imageData);

Τιμή παράμετρου

Παράμετροι Περιγραφή
width Το πλάτος του ImageData αντικειμένου σε pixel.
height Το ύψος του ImageData αντικειμένου σε pixel.
imageData Ένας άλλος ImageData αντικείμενο.

Υποστήριξη Browser

Ο αριθμός στη διάταξη σημαίνει την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτήν την ιδιότητα για πρώτη φορά.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Σημείωση:Οι εκδόσεις Internet Explorer 8 και παλιότερες δεν υποστηρίζουν το στοιχείο <canvas>.

Εγχειρίδιο HTML5 Canvas