Thuộc tính dữ liệu dữ liệu ImageData HTML canvas
Thí dụ
Tạo đối tượng ImageData 100 * 100 pixel trong đó mọi pixel được đặt thành màu đỏ:
Tranh sơn dầu
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);
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
| Property | |||||
|---|---|---|---|---|---|
| data | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Định nghĩa và Cách sử dụng
Thuộc tính dữ liệu trả về một đối tượng chứa dữ liệu hình ảnh của đối tượng ImageData được chỉ định.
Đối với mỗi pixel trong đối tượng ImageData có bốn phần thông tin, các giá trị RGBA:
R - Màu đỏ (từ 0-255)
G - Màu xanh lục (từ 0-255)
B - Màu xanh lam (từ 0-255)
A - Kênh alpha (từ 0-255; 0 là trong suốt và 255 là hoàn toàn có thể nhìn thấy)
Thông tin màu / alpha được giữ trong một mảng và được lưu trữ trong thuộc tính dữ liệu của đối tượng ImageData.
Ví dụ:
Cú pháp để tạo pixel đầu tiên trong đối tượng ImageData:
imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;
Cú pháp để làm cho pixel thứ hai trong đối tượng ImageData có màu xanh lục:
imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;
Mẹo: Hãy xem createImageData () , getImageData () và putImageData () để tìm hiểu thêm về đối tượng ImageData.
Cú pháp JavaScript
| Cú pháp JavaScript: | imageData .data; |
|---|
❮ Đối tượng Canvas