getImageData()方法傳回ImageData 對象，該物件拷貝了畫布指定矩形的像素資料。
注意：ImageData物件不是圖像，它規定了畫布上一個部分（矩形），並保存了該矩形內每個像素的資訊。
對於ImageData物件中的每個像素，都存在著四方面的信息，即RGBA值：
A - alpha 通道（0-255; 0 是透明的，255 是完全可見的）
color/alpha 資訊以陣列形式存在，並儲存於ImageData 物件的data 屬性中。
提示：在操作完成陣列中的color/alpha 資訊之後，您可以使用putImageData() 方法將影像資料拷貝回畫布上。
二碼 <!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html; charset=GBK /> <title> 改變透明度</title></head><body><h2> 改變透明度</h2><canvas id=mc width=600 height=460 style=border:1px solid black></canvas><script type=text/javascript> // 取得canvas元素對應的DOM物件var canvas = document.getElementById('mc'); // 取得在canvas上繪圖的CanvasRenderingContext2D物件var ctx = canvas.getContext('2d'); var image = new Image(); image.src = test.png; image.onload = function() { // 用透明參數的方法繪製圖片drawImage(image , 124 , 20 , 0.4); } var drawImage = function(image , x , y , alpha) { // 繪製圖片ctx.drawImage(image , x , y); // 取得從x、y開始，寬為image.width、高為image.height的圖片資料// 也就是取得繪製的圖片資料var imgData = ctx.getImageData(x , y , image.width , image.height); for (var i = 0 , len = imgData.data.length ; i < len ; i += 4 ) { //改變每個像素的透明度imgData.data[i + 3] = imgData.data[i + 3] * alpha; } // 將取得的圖片資料放回去。 ctx.putImageData(imgData , x , y); }</script></body></html>三運行結果以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。