Use of canvas in HTML5 get the mouse click on the RGB of a point on the page

The canvas in the 1.HTML5 can run in IE9. In the IE8, you can't get up and then you need something.

I recommend this approach, so that the code is not messy.

<!--[if lt ie9]> <script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script ><! [endif]-->

You need a html5.js file from Google.

Note: must be inserted between HTML5 is represented by default as inline elements, we need to use CSS to manually convert them to block elements for easy layout

Article,aside,dialog,footer,header,section,footer,nav,figure,menu    {       Display:block    }

This time the page supports canvas canvas, the first step is finished!

2. Then we need to draw an area on the canvas to place our images so that we can get the RGB on the image.

<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>

Place a picture on the canvas

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 ()// These codes are in the Help document there is  no need to go online search

3. We need to use a method of canvas, Getimagedata () This method can get to the canvas of RGB and grayscale. (Specifies the pixel data for the rectangle)

var imgdata=ctx.getimagedata (x,y,50,50); // The Getimagedata () method returns a ImageData object that copies the pixel data of the canvas's specified rectangle.  var red=imgdata.data[0]; var green=imgdata.data[1]; var blue=imgdata.data[2]; var alpha=imgdata.data[3];

4. Get the coordinates of the point where the mouse is clicked

 function   MousePosition (e) { if  (E.pagex && E.pagey) { ret     Urn   {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) 

Each click takes x, y as an argument to Getimagedata (parameter 1, parameter 2, parameter 3, parameter 4), parameter 1 and parameter 2.

As for the specific Getimagedata () usage and the meaning of the parameter I'm not going to nag about it, there are all the help documents.

This is a handwriting of the small color-taking function, very fun.

The project also needs to be synchronized with the picture, and synchronous moving like a software to do a little complicated

Use of canvas in HTML5 get the mouse click on the RGB of a point on the page