Latest web development tutorials
×

JavaScript & HTML DOM คู่มืออ้างอิง

ภาพรวม

JavaScript วัตถุ

JavaScript Array วัตถุ JavaScript Boolean วัตถุ JavaScript Date วัตถุ JavaScript Math วัตถุ JavaScript Number วัตถุ JavaScript String วัตถุ JavaScript RegExp วัตถุ JavaScript อสังหาริมทรัพย์ทั่วโลก / ฟังก์ชั่น JavaScript ผู้ประกอบการ

Browser วัตถุ

Window วัตถุ Navigator วัตถุ Screen วัตถุ History วัตถุ Location วัตถุ

DOM วัตถุ

HTML DOM Document วัตถุ HTML DOM วัตถุธาตุ HTML DOM แอตทริบิวต์วัตถุ HTML DOM วัตถุที่จัดกิจกรรม

HTML วัตถุ

<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>

ผ้าใบ HTML createImageData () วิธีการ

อ้างอิงวัตถุผ้าใบ วัตถุผ้าใบ

ตัวอย่าง

สร้าง 100 * 100 พิกเซลวัตถุ ImageData ซึ่งในแต่ละพิกเซลเป็นสีแดงแล้วใส่ไว้บนผืนผ้าใบ:

YourbrowserdoesnotsupporttheHTML5canvastag

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);

ลอง»

สนับสนุนเบราว์เซอร์

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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=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;

ไวยากรณ์ JavaScript

มีสองรุ่นของ createImageData () วิธีการคือ:

1. ระบุขนาด (พิกเซล) เพื่อสร้างวัตถุ ImageData ใหม่:

ไวยากรณ์ javascript: var imgData = บริบท .createImageData (ความกว้างความสูง);

2. สร้างเท่ากับขนาดของวัตถุอื่น ImageData ImageData ใหม่วัตถุที่ระบุ (ข้อมูลภาพจะไม่คัดลอก):

ไวยากรณ์ javascript: var imgData = บริบท .createImageData (ImageData);

ค่าพารามิเตอร์

参数 描述
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
imageData 另一个 ImageData 对象。

อ้างอิงวัตถุผ้าใบ วัตถุผ้าใบ