1.html5中的canvas在IE9中可以跑起來。在IE8則跑不起來，這時候就需要一些東西了。
我推薦這種方法，這樣顯得代碼不亂。
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
需要谷歌的一個html5.js的文件即可。
注意：必須插入在<head></head>之間才會有效。由於HTML5在默認情況下表現為內聯元素，對這些元素進行布局我們需要利用CSS手工把它們轉為塊狀元素方便布局
article,aside,dialog,footer,header,section,footer,nav,figure,menu
{
display:block
}
這時候頁面支持canvas畫布，第一步已經完成了！
2.然后我們需要在畫布上畫出一塊區域，用來放置我們的圖片，以便我們去獲取圖片上的RGB。
<canvas width:="300px" height="200px" id="canv"></canvas>
<script type="text/javascript"> var ctx=document.getElementById('myCanvas').canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.rect(0,0,80,100); </script>
將圖片放置到畫布上
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.rect(0,0,150,100); ctx.fillStyle=pat; ctx.fill() //這些代碼都在幫助文檔有 根本不必去網上搜
3.我們需要利用canvas的一個方法了，getImageData() 這個方法可以獲得到畫布上的RGB以及灰度。(指定矩形的像素數據)
var imgData=ctx.getImageData(X,Y,50,50); //getImageData() 方法返回 ImageData 對象，該對象拷貝了畫布指定矩形的像素數據。 var red=imgData.data[0]; var green=imgData.data[1]; var blue=imgData.data[2]; var alpha=imgData.data[3];
4.獲取鼠標點擊所在點的坐標
function mousePosition(e) { if(e.pageX && e.pageY) { return { x : e.pageX, y : e.pageY }; } var scrollElem = (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body; return { x: e.clientX + scrollElem.scrollLeft, y: e.clientY + scrollElem.scrollTop }; } //這是調用事件 onclick="alert('X：'+mousePosition(event).x+'Y：'+mousePosition(event).y)
每次點擊將獲取的X,Y作為參數傳遞到getImageData(參數1,參數2,參數3,參數4)，參數1與參數2上即可。
至於具體的getImageData()用法以及參數含義我就不在這嘮叨了，幫助文檔都有。
這是一個手寫的小取色功能，挺好玩。
//項目里面還需要對圖片進行同步放縮 以及同步移動 類似一個軟件做的有點復雜