ผ้าใบ HTML แอตทริบิวต์ข้อมูล ImageData
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง
ตัวอย่าง
สร้าง 100 * 100 พิกเซลวัตถุ ImageData ซึ่งแต่ละพิกเซลมีการกำหนดให้สีแดง:
ผ้าใบ
javascript:
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);
ลอง»
สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari แอตทริบิวต์สนับสนุนข้อมูล ImageData
หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
สถานที่ให้บริการข้อมูลที่ส่งกลับวัตถุที่มีข้อมูลภาพวัตถุ ImageData ระบุ
ImageData วัตถุแต่ละพิกเซลมีสี่ด้านของข้อมูล ได้แก่ ค่า RGBA:
R - สีแดง (0-255)
G - กรีน (0-255)
B - สีฟ้า (0-255)
เอ - ช่องอัลฟา (0-255; 0 โปร่งใส 255 จะมองเห็นได้อย่างเต็มที่)
ข้อมูลสี / อัลฟาในรูปแบบของอาร์เรย์และเก็บไว้ในข้อมูลแอตทริบิวต์วัตถุ ImageData
ตัวอย่าง:
ImageData วัตถุพิกเซลไวยากรณ์สีแดง:
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;
วัตถุ ImageData พิกเซลที่สองจะเปิดไวยากรณ์สีเขียว:
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;
เคล็ดลับ: ดู createImageData () , getImageData () และ putImageData () วิธีการที่จะได้รับความรู้เพิ่มเติมเกี่ยวกับวัตถุ ImageData
ไวยากรณ์ JavaScript
| ไวยากรณ์ javascript: | ImageData .data; |
|---|
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง