html5 Canvas制作的网页颜色拾取器

学习html5有一段时间了，本人也非常期待html5给我们带来的方便。

在线演示地址 在底部评论第一条

这里写一个小小的应用，应用html5 Canvas制作一个拾取页面颜色的网页。

首先说明这个原理（当然要达到这个目的有很多手段，这边介绍本人的）：

通过getImageData()方法获取画布中的像素。

getImageData()支持四个参数context.getImageData(x,y,width,height)

(x，y)表示访问的像素区域的原点坐标，（width，height）表示像素区域的宽度和高度。

getImageData本身不会出现任何可视的效果，但是它返回一个2D渲染上下文ImageData对象。ImageData对象包含3个属性：width，height，data.

这里width，height指像素区域的宽和高，重点是data属性。data属性存储的是一个一维数组CanvasPixelArray。并且每一个像素用4个整数值表示，范围是0~255，

分别表示红（r），绿（g），蓝（b）和阿尔法值（a）。因此0~3表示第一个像素颜色值，4~7表示第二个颜色值，以此类推。

如果你看完了以上基础那么你就可以获取到页面的每一个像素颜色了，接下来就是具体应用了，把那些你获取到的像素颜色值都取出来，ok不废话上代码:

<script type="text/javascript">
$(document).ready(function(){

var canvas=$("#myCanvas");
var context=canvas.get(0).getContext("2d");创建2d渲染上下文图

var img=new Image();///获取一张图片地址，你可以随便更改你喜欢的图片
img.src="img/mypic.jpg";

$(img).load(function(){
context.drawImage(img,0,0); /在画布上绘制的一张图像，用的是之前的图像当要把它载入画布
});

canvas.click(function(e){///鼠标在画布的图像上取得像素的坐标
var canvasOffset=canvas.offset();
var canvasX=Math.floor(e.pageX-canvasOffset.left);
var canvasY=Math.floor(e.pageY-canvasOffset.top);

var imageData=context.getImageData(canvasX,canvasY,1,1);
var pixel=imageData.data;
var pixelColor="rgba("+pixel[0]+","+pixel[1]+","+pixel[2]+","+pixel[3]+")" 将获取到的像素信息传给变量

$("body").css("background",pixelColor);///将变量中的信息传给body作为他的背景颜色
document.myForm.red.value=pixel[0];
document.myForm.green.value=pixel[1];
document.myForm.blue.value=pixel[2];
});
});
</script>

好了，制作完毕，建议打开在线演示地址用firefox的firebug查看源代码。

如果你对上面的代码不熟但又很感兴趣的话，建议去看html5 Canvas里面有很多让你吃惊和感兴趣的东西，如过感兴趣还可以关注本人博客，之后还会写一些html5之类的。