ImageData data trong Canvas
Tạo một đối tượng ImageData có kích thước 100*100 với mỗi pixel được thể hiện bằng màu đỏ: Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...
Tạo một đối tượng ImageData có kích thước 100*100 với mỗi pixel được thể hiện bằng màu đỏ:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var imgData = ctx.createImageData(100, 100); var i; for (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); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| ImageData data | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Thuộc tính ImageData data trả về một đối tượng chứa dữ liệu ảnh của một đối tượng ImageData.
Mỗi pixel trong đối tượng ImageData có chứa 4 thông tin, thông tin đó chính là giá trị RGBA:
R – Màu đỏ (từ 0-255)
G – Màu xanh lá cây (từ 0-255)
B – Màu xanh da trời (từ 0-255)
A – Độ mờ (từ 0-255; 0 là trong suốt và 255 là hiển thị đầy đủ)
Thông tin về màu/độ mờ được chứa trong một mảng và được lưu trữ trong thuộc tính data của đối tượng ImageData.
Ví dụ:
Cú pháp để tạo pixel đầu tiên trong đối tượng ImageData là màu đỏ:
|
1 2 3 4 5 6 |
imgData=ctx.createImageData(100,100); imgData.data[0]=255; imgData.data[1]=0; imgData.data[2]=0; imgData.data[3]=255; |
Cú pháp để tạo pixel đầu tiên trong đối tượng ImageData là màu xanh lá cây:
|
1 2 3 4 5 6 |
imgData=ctx.createImageData(100,100); imgData.data[4]=0; imgData.data[5]=255; imgData.data[6]=0; imgData.data[7]=255; |
Mẹo: Xem createImageData(), getImageData() và putImageData() để tìm hiểu thêm về đối tượng ImageData.
Cú pháp JavaScript: imgData.data;
