コメント：CanvasのgetImagedataを使用して、短時間、少し荒い色のRGBA値を取得します
以下は、ブラウザにHTML5をサポートする必要があるソースコードです<html>
<head>
</head>
<body>
<canvas onmousemove = "showcurrentcolor（event）">
</canvas>
<br/>
<div>
</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（0,0,60,200）;
var ox = can.OffsetLeft
var oy = can.offsettop;
var span = document.createelement（ "input"）;
span.setattribute（ "id"、 "rgba"）;
document.getElementById（ "textresult"）。appendChild（span）;
}
}
関数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 ="+a;
document.getElementById（ "textresult"）。appendChild（span）;
}
}
}
</script>
</body>
</html>