html5 的canvas還有一些很酷炫的效果，接下來講的是canvas對畫素的處理，雖然略有些複雜，但實現出的效果，還是很讚的~~。

   為了不讓大家失望，先強調一句：下列效果需呼叫getImageData()，而這個方法會被某些瀏覽器阻止，如chrome。原因是：

   受js同源策略影響，js跨域限制是不能獲取非同一域名下的資料的，以下程式碼是在本地上測試的， 而本地的位置是沒有域名的，所以瀏覽器都認為你是跨域，導致報錯。

解決方法：可以用其他的瀏覽器。或者可以將圖片寫入PHP，具體可參照 解決getImageData跨域

    第一個效果：灰度圖

    插入html如下：

 <img id="img1" src="baijuyi.jpg"  />
 <input id="btnGO" type="button" value="轉成灰度圖"/><br />
 <canvas id="c1" height="200" width="320"></canvas><br />

<script>
 function $(id)
{
return document.getElementById(id);
}
function init()
{

$("btnGO").onclick=function()
{
c1.width=img1.width;
c1.height=img1.height;
var ctx=c1.getContext("2d");
ctx.drawImage(img1,0,0,c1.width,c1.height);//將image繪製到canvas上
var imgData=ctx.getImageData(0,0,c1.width,c1.height);//獲取image的所有畫素點儲存在imgData數組裡，每四個為一個畫素的rgba值；從上到下，從左到右。
//比如imgData.data[0]~imgData.data[3]表示第一個畫素點。

for(var i=0;i<imgData.data.length;i+=4)
{
var r=imgData.data[i],
   g=imgData.data[i+1],
b=imgData.data[i+2];
var gray =(r*30+g*59+b*11+50)*0.01;//灰度值公式
imgData.data[i]=gray;
imgData.data[i+1]=gray;
imgData.data[i+2]=gray;
}
ctx.putImageData(imgData,0,0);//將image重繪到canvas中
}
}

</script>

第二種效果：浮雕圖效果

<h2>畫素操作</h2>
<img id="img1" src="baijuyi.jpg"  />
<input id="btnGO" type="button" value="轉成浮雕圖"/><br />
<canvas id="c1" height="200" width="320"></canvas><br />

<script>

function $(id)
{
return document.getElementById(id);
}
function init()
{
$("btnGO").onclick=function()
         {
c1.width=img1.width;
        c1.height=img1.height;
var ctx=c1.getContext("2d");
ctx.drawImage(img1,0,0,c1.width,c1.height);
var imgData=ctx.getImageData(0,0,c1.width,c1.height);
console.log(imgData);
var iData=imgData.data;

               //浮雕效果的實現可以有多種方式，這裡介紹較簡單的。新的畫素色彩值是和右邊畫素的色彩值相減，然後再加128
for(var i=0;i<img1.height-1;i++)
{
   for(var j=0;j<img1.width;j++)
{
var start=(i*img1.width+j)<<2;
var r=iData[start]-iData[start+4]+128,
   g=iData[start+1]-iData[start+5]+128,
   b=iData[start+2]-iData[start+6]+128;
   //越界處理
   r=(r<0)?0:(r>255)?255:r;
   g=(g<0)?0:(g>255)?255:g;
   b=(b<0)?0:(b>255)?255:b;
   //再轉灰度圖
   var g=(r*30+g*59+b*11+50)*0.01;
   iData[start]=g;
   iData[start+1]=g;
   iData[start+2]=g;
   }

  }
  ctx.putImageData(imgData,0,0);//將新資料繪入canvas中
}
}
init();//呼叫函式
</script>