댓글 : 캔버스의 getImagedata를 사용하여 짧은 시간 동안 색상 RGBA 값을 얻고 약간 거칠다.
다음은 브라우저가 HTML5를 지원하도록 요구하는 소스 코드입니다.<html>
<헤드>
</head>
<body>
<canvas onmouseMove = "showCurrentColor (이벤트)">
</캔버스>
<br/>
<div>
</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 (0, '#00ff00');
gradient.addcolorstop (1, '#ff0000');
cxt.fillstyle = 그라디언트;
cxt.fillRect (0,0,60,200);
var ox = can.offsetleft
var oy = can.offsetTop;
var span = document.createelement ( "입력");
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);
}
}
}
</스크립트>
</body>
</html>