Αντικείμενο δεδομένων HTML canvas

Εγχειρίδιο αναφοράς HTML5 Canvas

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

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

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

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

χρώμα/alpha υπάρχουν ως μάζα και αποθηκεύονται στο αντικείμενο ImageData data πρότυπο.

πρότυπο:

Η γραμματική για να αλλάξετε τον πρώτο εικονογραφηματισμό του αντικειμένου ImageData σε ροζ:

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

Η γραμματική για να αλλάξετε τον δεύτερο εικονογραφηματισμό του αντικειμένου ImageData σε πράσινο:

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

Συμβουλή:Δείτε createImageData()、getImageData() και putImageData() μεθόδους για περισσότερες πληροφορίες σχετικά με το αντικείμενο ImageData.

πρότυπο

Δημιουργία αντικειμένου ImageData 100*100 εικονογραφημάτων, όπου κάθε εικονογραφημάτιο έχει ροζ χρώμα:

Ο περιηγητής σας δεν υποστηρίζει την ετικέτα 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);

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

Γλώσσα

imageData.data;

Υποστήριξη浏览器

Τα αριθμήματα στη τаблицή σημειώνουν την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτήν την ιδιότητα.

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