Comments: Use the getImageData of canvas to obtain the rgba value of the color for a short time, a little rough. The following is the source code that requires the browser to support html5.
The Code is as follows:
<Html>
<Head>
</Head>
<Body>
<Canvas id = "colorPicker" onmousemove = "showCurrentColor (event)">
</Canvas>
<Br/>
<Div id = "textResult">
</Div>
<Script type = "text/javascript">
If (document. createElement ("canvas ")){
If (document. getElementById ("colorPicker"). getContext ){
Var can = document. getElementById ("colorPicker ");
Can. setAttribute ("height", 300 );
Var cxt = can. getContext ("2d ");
Var gradient = cxt. createLinearGradient (0.5, 0.5, 0,150 );
Gradient. addColorStop (0, '#00ff00 ');
Gradient. addColorStop (1, '# ff0000 ');
Cxt. fillStyle = gradient;
Cxt. fillRect (60,200 );
Var ox = can. offsetLeft
Var oy = can. offsetTop;
Var span = document. createElement ("input ");
Span. setAttribute ("id", "rgba ");
Document. getElementById ("textResult"). appendChild (span );
}
}
Function showCurrentColor (e ){
Var x = e. clientX-8;
Var y = e. clientY-29;
Var w = 10;
If (document. createElement ("canvas ")){
If (document. getElementById ("colorPicker"). getContext ){
Var can = document. getElementById ("colorPicker ");
Var cxt = can. getContext ("2d ");
Var gradient = cxt. createLinearGradient (0.5, 0.5, 0,150 );
Var span = document. getElementById ("rgba ");
Var imgDatas = cxt. getImageData (ox, oy, 10,200 );
Var imgData = imgDatas. data;
Var g = imgData [4 * (w) * (y) + (x) * 4 + 1];
Var r = imgData [4 * (w) * (y) + (x) * 4];
Var B = imgData [4 * (w) * (y) + (x) * 4 + 2];
Var a = imgData [4 * (w) * (y) + (x) * 4 + 3];
Span. value = "r =" + r + "g =" + g + "B =" + B + "a =" +;
Document. getElementById ("textResult"). appendChild (span );
}
}
}
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
