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()用法以及参数含义我就不在这唠叨了，帮助文档都有。
这是一个手写的小取色功能，挺好玩。
//项目里面还需要对图片进行同步放缩 以及同步移动 类似一个软件做的有点复杂
转载：http://www.cnblogs.com/zqzjs/p/4423246.html
