html5中canvas的使用获取鼠标点击页面上某点的RGB

浏览数：54 / 时间：2015年06月09日

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)