imagedata物件包含了乙個區域內的canvas的畫素資訊。它包含以下可讀屬性：
width什麼是uint8clampedarray？這個陣列裡的數值是8位的整型，而且值得範圍在0和255之間。任何不在[0, 255]之間的數都會變成[0, 255]之間最接近的那個整型數。canvas的寬度，單位是畫素。
height
canvas的高度，單位是畫素。
data
乙個uint8clampedarray的一維陣列，包含了每個畫素的rgba值。
0到255之間，那記錄的自然是rgba顏色數值啦。這個data陣列是這樣排列的，data[0]是第一排第一列的畫素r通道的數值，data[1]第一排第一列的畫素g通道的數值，data[3]是第一排第一列的畫素的alpha通道的數值。而data[4]是第一排第二列的畫素的r通道數值，以此類推。
比如說，第50排第200列的畫素的藍色通道的值：
bluecomponent = imagedata.data[((50 * (imagedata.width * 4)) + (200 * 4)) + 2];另外，data也有length屬性，就是data陣列的長度。
有兩種方法建立imagedata：
var myimagedata = ctx.createimagedata(width, height);
var myimagedata = ctx.createimagedata(anotherimagedata);注意啦，方法二是不會把data屬性複製過去的，僅僅是複製了寬度和高度，data陣列裡的畫素資訊都是透明黑的，也就是都是0。
可以用getimagedata()方法獲取畫素資訊。
var myimagedata = ctx.getimagedata(left, top, width, height);top和left就是所擷取的畫布部分的左上角座標。
tip：
超過畫布區域返回的畫素資訊都是透明黑，也就是都是0。
var img = new image();
img.src = '';
var canvas = document.getelementbyid('canvas');
var ctx = canvas.getcontext('2d');
img.onload = function() ;
var color = document.getelementbyid('color');
function pick(event)
canvas.addeventlistener('mousemove', pick);
ctx.putimagedata(myimagedata, dx, dy);這個方法可以傳入乙個imagedata物件，然後把imagedata物件中的畫素資訊都畫出來。dx, dy是繪製的左上角座標。
比如我們可以逐一改變imagedata物件中的值，從而改變了整個圖象的顏色，再把它畫出來。
這有什麼用呢？對於要對畫素進行的操作來說，這很方便。比如反色、去色等操作。
var img = new image();
img.src = '';
img.onload = function() ;
function draw(img)
ctx.putimagedata(imagedata, 0, 0);
};var grayscale = function()
ctx.putimagedata(imagedata, 0, 0);
};var invertbtn = document.getelementbyid('invertbtn');
invertbtn.addeventlistener('click', invert);
var grayscalebtn = document.getelementbyid('grayscalebtn');
grayscalebtn.addeventlistener('click', grayscale);
}
點選grayscale按鈕會變成灰色，點選invert按鈕會反色。
可以把**放進codepen裡看看效果如何。
canvas.todataurl('image/png')也可以生成二進位制物件：預設轉換成的格式是png。
canvas.todataurl('image/jpeg', quality)
也可以是別的格式。quality是品質，數值是0~1。0是最差的品質，1是最佳的品質。
canvas.toblob(callback, type, encoderoptions)
canvas畫素操作
獲得乙個包含畫布場景畫素資料的imagedata對像,它代表了畫布區域的物件資料 ctx.getimagedata sx,sy,sw,sh sx 將要被提取的影象資料矩形區域的左上角 x 座標。sy 將要被提取的影象資料矩形區域的左上角 y 座標。sw 將要被提取的影象資料矩形區域的寬度。sh 將要...
canvas畫素的操作
在canvas中的畫素操作 到目前為止，我們尚未深入了解canvas畫布真實畫素的原理，事實上，你可以直接通過imagedata物件操縱畫素資料，直接讀取或將資料陣列寫入該物件中 得到場景畫素資料 getimagedata 獲得乙個包含畫布場景畫素資料的imagedata對像,它代表了畫布區域的物件...
canvas畫素操作函式封裝
傳入乙個imagedata物件，x軸的座標，y軸的座標 function getpxinfo imgdata,x,y 獲取某個畫素呼叫函式 示例 var imgdata ctx.getimagedata 0,0,canvas.width,canvas.height 獲取 49,49 的畫素的rgba...