Kommentar: Verwenden Sie Canvas 'getImagedata, um den Farb -RGBA -Wert für kurze Zeit und ein bisschen rau zu erhalten
Das Folgende ist der Quellcode, für dem der Browser HTML5 unterstützt wird<html>
<kopf>
</head>
<body>
<canvas onmousemove = "showCurrentColor (Ereignis)">
</canvas>
<br/>
<div>
</div>
<script type = "text/javaScript">
if (document.createelement ("canvas")) {
if (document.getElementById ("colorpicker"). getContext) {
var can = document.getElementById ("colorpicker");
Can.SetatTribute ("Höhe", 300);
var cxt = can.getContext ("2d");
var gradienten = 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 ("Eingabe");
span.setattribute ("id", "rgba");
document.getElementById ("textresult"). appendChild (span);
}
}
Funktion 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 gradienten = 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>