التعليق: استخدم GetImagedata Canvas للحصول على قيمة RGBA اللون لفترة قصيرة وخشنة بعض الشيء
فيما يلي رمز المصدر الذي يتطلب من المتصفح دعم HTML5<html>
<head>
</head>
<body>
<canvas onMouseMove = "showcurrentColor (event)">
</canvas>
<br/>
<viv>
</div>
<script type = "text/javaScript">
if (document.createElement ("canvas")) {
if (document.getElementById ("colorpicker"). getContext) {
var can = document.getElementById ("colorpicker") ؛
can.setAttribute ("الارتفاع" ، 300) ؛
var cxt = can.getContext ("2d") ؛
var gradient = cxt.createlineargradient (0.5،0.5،0،150) ؛
التدرج.
Gradient.AddColorStop (1 ، '#ff0000') ؛
cxt.fillStyle = التدرج ؛
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>