createImageData() 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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| createImageData() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức createImageData() dùng để tạo một đối tượng ImageData rỗng. Mặc định, các giá trị pixel của đối tượng mới là màu đen trong suốt.
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 đủ)
Vì vậy, màu đen trong suốt sẽ là: (0,0,0,0).
Thông tin về màu/độ mờ được chứa trong một mảng và mảng này chứa 4 thông tin về mỗi pixel, kích cỡ của mảng gấp 4 kích cỡ của đối tượng ImageData: awidth*height*4. (Bạn có thể lấy kích cỡ của mảng một cách dễ dàng hơn bằng cách sử dụng ImageDataObject.data.length)
Mảng chứa thông tin màu/độ mờ được lưu trữ trong thuộc tính data của đối tượng ImageData.
Mẹo: Sau khi bạn có thông tin về màu/độ mờ trong mảng, bạn có thể sao chép dữ liệu này để hiển thị trên canvas bằng phương thức putImageData().
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; |
Cú pháp JavaScript:
Phương thức createImageData() có 2 kiểu sử dụng:
1. Tạo mới một đối tượng ImageData kèm theo độ phân giải (đơn vị là pixel):
Cú pháp JavaScript: var imgData=context.createImageData(awidth,height);
2. Tạo mới một đối tượng ImageData có độ phân giải giống một đối tượng ImageData khác (chỉ giống thông tin về độ phân giải, không sao chép dữ liệu khác):
Cú pháp JavaScript: var imgData=context.createImageData(imageData);
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| awidth | Chiều rộng của đối tượng ImageData mới, đơn vị đo là pixel |
| height | Chiều cao của đối tượng ImageData mới, đơn vị đo là pixel |
| imageData | Đối tượng ImageData khác dùng để lấy thông tin độ phân giải |
