Thuộc tính Canvas data

Tài liệu tham khảo Canvas

Định nghĩa và cách sử dụng

data Thuộc tính 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, đều có bốn thông tin, đó là giá trị RGBA:

  • R - màu đỏ (0-255)
  • G - màu xanh lá cây (0-255)
  • B - màu xanh dương (0-255)
  • A - alpha channel (0-255; 0 là trong suốt, 255 là hoàn toàn nhìn thấy được)

màu/alpha tồn tại dưới dạng mảng và được lưu trữ trong đối tượng ImageData của data trong thuộc tính.

Ví dụ:

Cú pháp để chuyển đổi pixel thứ nhất trong đối tượng ImageData thành màu đỏ:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Cú pháp để chuyển đổi pixel thứ hai trong đối tượng ImageData thành màu xanh lá cây:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Lưu ý:Xem thêm createImageData()、getImageData() và putImageData() Phương pháp để biết thêm về đối tượng ImageData.

Mô hình

Tạo đối tượng ImageData 100x100 pixel, trong đó mỗi pixel đều được thiết lập thành màu đỏ: :

Trình duyệt của bạn không hỗ trợ thẻ canvas.

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

Thử trực tiếp

Cú pháp

imageData.data;

Hỗ trợ trình duyệt

Số liệu trong bảng ghi chú phiên bản trình duyệt hỗ trợ thuộc tính này hoàn toàn đầu tiên.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Ghi chú:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ yếu tố <canvas>.

Tài liệu tham khảo Canvas