Komentar: Gunakan Canvas 'GetImagedata untuk mendapatkan nilai warna RGBA untuk waktu yang singkat dan sedikit kasar
Berikut ini adalah kode sumber yang mengharuskan browser untuk mendukung HTML5<Html>
<head>
</head>
<body>
<canvas onmouseMove = "showCurrentColor (event)">
</ Canvas>
<br/>
<div>
</div>
<type skrip = "Teks/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 = gradien;
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);
}
}
fungsi 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>