onmousemove를 사용하여 rgb 색상 값을 얻습니다.

enter image description here colorpicker를 만들었습니다. (물론 좋지는 않지만!). 마우스 움직임에 따라 onmousemove 이벤트를 사용하여 값을 가져오고 싶습니다. 그러나 clientX 및 clientY를 사용하면 값을 2로만 관리 할 수 있습니다. 값. rgb 색상의 세 번째 값을 생성 할 수 있습니다. ?? pls helponmousemove를 사용하여 rgb 색상 값을 얻습니다.

![<html> 
<head> 
<style> 

</style> 
</head> 
<body> 

<script type="text/javascript"> 



} 
     var Canvas = document.createElement('canvas'); 
     var s=document.createAttribute('id'); 
     s.value="mycanvas"; 
     var i=0,j=0,a=255,r=0;g=0; 
     Canvas.width = 256; 
     Canvas.height = 256; 
     Canvas.style.position="relative"; 
     Canvas.style.top="0px"; 
     Canvas.style.border = '3px solid black'; 
     for(r=0;r<256;r++){ 

     for(g=0;g<256;g++){ 




       var context = Canvas.getContext('2d'); 

       context.beginPath(); 
       context.moveTo(i,j); 
        context.strokeStyle = 'rgb(' + r + ', ' + g + ','+a+')'; 
        context.lineTo(i+90,j); 

       context.stroke(); 
       context.closePath(); 

        j++; 
        if(j==256){ 
        if(i<=256-90){ 
         i=i+90; 
         } 
         j=0; 
         } 

       a--; 
       if(a==0){a=150;} 



      } 
     } 


     document.body.appendChild(Canvas); 
document.getElementById("mycanvas").addEventListener("mouseover",myfunc,false); 
    </script> 


</body> 
</html>][2]

출처

2014-04-15 AL-zami

myfunc 구현은 어디에 있습니까?

는 다음 코드 나 값 (FX는 테스트)받을 수 있습니다

function myfunc(e) { 
    var context = Canvas.getContext('2d'); 
    var imageData = context.getImageData(e.clientX, e.clientY, 1, 1); 
    var red = imageData.data[0]; 
    var green = imageData.data[1]; 
    var blue = imageData.data[2]; 
    var alpha = imageData.data[3]; 
    console.log(red + " " + green + " " + blue); 
}

출처

2014-04-15 16:56:04 dafi

감사를 사용 BTW 경우! 하지만 작동하지 않습니다. addEventListener lyk this를 사용하는 것이 좋습니다. 혼란 스러워요. \t \t function myfunc ( var imageData = context.getImageData (e.clientX, e.clientY, 1, 1); var red = imageData.data [0]; var green = imageData.data [1]; var blue = imageData.data [2]; var alpha = imageData.data [3]; 경고 (빨간색 + ""+ 녹색 + ""+ 파란색); } \t \t canvas.addEventListener ("mouseover", myfunc, false); –

내 jsfiddle http://jsfiddle.net/CKK92/ 좀 봐, 난 setAttribute 함께 createAttribute 대체했습니다 – dafi

onmousemove를 사용하여 rgb 색상 값을 얻습니다.

답변

관련 문제