คอร์สแนะนำ：

คู่มือติดตาม HTML5 Canvas

HTML canvas data 属性

data มาตราฐาน กับวิธีใช้

สำหรับแต่ละพิกเซลในวัตถุ ImageData มีข้อมูลสี่ประการ เรียกว่า RGBA คือ

  • R - สีแดง (0-255)
  • G - สีเขียว (0-255)
  • B - สีน้ำเงิน (0-255)
  • A - ช่อง alpha (0-255; 0 คือโปร่งใส 255 คือเห็นได้ดีทั้งหมด)

ข้อมูล color/alpha อยู่ในรูปแบบของแบบฟอร์มฉากเรียง (array) และเก็บไว้ในวัตถุ ImageData data ตัวแปร

ตัวอย่าง：

สyntax ในการทำให้พิกเซลแรกของวัตถุ ImageData มีสีแดง：

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

สyntax ในการทำให้พิกเซลที่สองของวัตถุ ImageData มีสีเขียว：

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

คำเตือน：ดูเพิ่มเติม createImageData()、getImageData() และ putImageData() วิธีการ สำหรับได้รับความรู้เกี่ยวกับวัตถุ ImageData。

ตัวอย่าง

สร้างวัตถุ ImageData ขนาด 100*100 พิกเซล ที่แต่ละพิกเซลถูกควบคุมด้วยสีแดง：：

คุณเวิร์คเบราเซอร์ไม่สนับสนุนแท็ก 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);

ทดลองด้วยตัวเอง

รูปแบบ

imageData.data;

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางระบุเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่

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

หมายเหตุ：Internet Explorer 8 และเวอร์ชั่นเก่ากว่าไม่สนับสนุนสมาชิก <canvas>

คู่มือติดตาม HTML5 Canvas