canvas濾鏡之簡單的取反

自己學(xué)習(xí)了一下canvas濾鏡，編寫一個(gè)簡單的小界面，嘿嘿！

注釋都在里面啦啦啦，感興趣的來瞅瞅哦?? ?歡迎指正

css樣式：

#wrap{

width:600px;

height:600px;

background-color:#EEEEEE;

}

#sourceDiv{

float:left;

border:2pxsolidblue;

}

#canvasDiv{

float:right;

border:2pxsolidred;

}

body里面

js部分

window.onload=function() {

varimg=document.getElementById("img");

varcanvas=document.getElementById("canvas");

varbtn=document.getElementById("btn");

canvas.width=img.clientWidth;

canvas.height=img.clientHeight;

pen=canvas.getContext("2d");

pen.drawImage(img,0,0, canvas.width, canvas.height);//把圖片放在畫布上

}

//getImageData(x,y,width,height) 復(fù)制畫布上指定矩形的像素?cái)?shù)據(jù) 然后通過putImageData()將圖像數(shù)據(jù)放回畫布：

//返回ImageData對象，該對象拷貝了畫布指定矩形的像素?cái)?shù)據(jù)

//對于 ImageData 對象中的每個(gè)像素，都存在著四方面的信息rgba,

//color/alpha 信息以數(shù)組形式存在，并存儲(chǔ)于 ImageData 對象的 data 屬性中

//即 RGBA 值 eg:red=ImageData.data[0];

btn.onclick=function() {

varimgData=pen.getImageData(0,0, canvas.width, canvas.height);

varlen=canvas.width*canvas.height*4;

//遍歷imgData.data改變像素值

for(vari=0; i

//每一個(gè)像素的color/alpha 信息

//取反色

imgData.data[i]=255-imgData.data[i];

imgData.data[i+1]=255-imgData.data[i+1];

imgData.data[i+2]=255-imgData.data[i+2];

imgData.data[i+3]=255;

}

// 將圖像數(shù)據(jù)imgData放回畫布

//putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

//在畫布上的位置x y在畫布上放置圖像的位置水平位置偏移量 垂直位置偏移量圖像寬度

pen.putImageData(imgData,0,0);

}