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 объект Element 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 холст атрибут ImageData данных

Холст Ссылка на объект объект Canvas

примеров

Создание 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 поддерживают атрибуты ImageData данных.

Примечание: 8 и более ранние версии Internet Explorer не поддерживают элемент <Canvas>.


Определение и использование

Свойство данных возвращает объект, содержащий указанные данные изображения объекта ImageData.

ImageData объект для каждого пикселя, есть четыре области информации, а именно значения RGBA:

R - красный (0-255)
G - зеленый (0-255)
B - синий (0-255)
А - альфа-канал (0-255; 0 является прозрачным, 255 полностью виден)

цвет / альфа информацию в виде массива и хранятся в данных атрибутов ImageData объект.

Пример:

В 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.


синтаксис JavaScript

Синтаксис JavaScript: ImageData .data;


Холст Ссылка на объект объект Canvas