ผ้าใบ HTML createImageData () วิธีการ
คู่มือการใช้งาน 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 สนับสนุน createImageData () วิธีการ
หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
createImageData () วิธีการสร้างวัตถุ ImageData ใหม่ว่างเปล่า ค่าเริ่มต้นของวัตถุใหม่พิกเซลสีดำโปร่งใส
ImageData วัตถุแต่ละพิกเซลมีสี่ด้านของข้อมูล ได้แก่ ค่า RGBA:
R - สีแดง (0-255)
G - กรีน (0-255)
B - สีฟ้า (0-255)
เอ - ช่องอัลฟา (0-255; 0 โปร่งใส 255 จะมองเห็นได้อย่างเต็มที่)
ดังนั้นโปร่งใสการแสดงสีดำ (0,0,0,0)
สี / อัลฟาข้อมูลในรูปแบบของอาร์เรย์และตั้งแต่อาร์เรย์มีสี่ชิ้นส่วนของข้อมูลสำหรับแต่ละพิกเซลดังนั้นขนาดของอาร์เรย์เป็น ImageData วัตถุสี่ครั้ง: กว้าง * สูง * 4 (ขนาดอาร์เรย์ได้เป็นวิธีที่ง่ายมากขึ้นคือการใช้ ImageDataObject.data.length)
มันมีสี / อัลฟาข้อมูล ImageData อาร์เรย์เก็บไว้ในวัตถุของ ข้อมูล สถานที่ให้บริการ
เคล็ดลับ: อาร์เรย์ที่สมบูรณ์ของข้อมูลสี / อัลฟาในการดำเนินงานคุณสามารถใช้ putImageData () วิธีการของข้อมูลภาพจะถูกคัดลอกกลับไปยังผืนผ้าใบ
ตัวอย่าง:
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;
ไวยากรณ์ JavaScript
มีสองรุ่นของ createImageData () วิธีการคือ:
1. ระบุขนาด (พิกเซล) เพื่อสร้างวัตถุ ImageData ใหม่:
| ไวยากรณ์ javascript: | var imgData = บริบท .createImageData (ความกว้างความสูง); |
|---|
2. สร้างเท่ากับขนาดของวัตถุอื่น ImageData ImageData ใหม่วัตถุที่ระบุ (ข้อมูลภาพจะไม่คัดลอก):
| ไวยากรณ์ javascript: | var imgData = บริบท .createImageData (ImageData); |
|---|
ค่าพารามิเตอร์
| 参数 | 描述 |
|---|---|
| width | ImageData 对象的宽度，以像素计。 |
| height | ImageData 对象的高度，以像素计。 |
| imageData | 另一个 ImageData 对象。 |
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง