Exemplu
Crearea unui obiect ImageData 100 * 100 pixeli în cazul în care fiecare pixel este setat la culoarea roșie:
pânză
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (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); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
| Proprietate | |||||
|---|---|---|---|---|---|
| data | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
Proprietatea de date returnează un obiect care conține datele de imagine ale obiectului ImageData specificat.
Pentru fiecare pixel într-un obiect ImageData există patru bucăți de informații, valorile RGBA:
R - Culoarea roșie (from 0-255)
G - Culoarea verde (from 0-255) de (from 0-255)
B - Culoarea albastră (from 0-255) de (from 0-255)
A - Canalul alfa (from 0-255; 0 is transparent and 255 is fully visible) de (from 0-255; 0 is transparent and 255 is fully visible)
Informația de culoare / alfa are loc într-o matrice, și este stocată în proprietatea de date a obiectului ImageData.
Examples:
Sintaxa pentru a face primul pixel în ImageData obiecta roșu:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;Sintaxa pentru a face al doilea pixel în verde obiect ImageData:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;Tip: Uită - te la createImageData() , getImageData() , și putImageData() pentru a afla mai multe despre obiectul ImageData.
JavaScript Sintaxa
| sintaxa JavaScript: | imageData .data; |
|---|
<Canvas obiect