Thuộc tính dữ liệu canvas HTML

Tài liệu tham khảo HTML5 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, tức 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 - kênh alpha (0-255; 0 là trong suốt, 255 là hoàn toàn nhìn thấy được)

color/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ẫu

Tạo đối tượng ImageData 100*100 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ử ngay

Cú pháp

imageData.data;

Hỗ trợ trình duyệt

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

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ợ phần tử <canvas>.

Tài liệu tham khảo HTML5 Canvas