コメント: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>