Question

enter image description here 我制作了一个颜色选择器（虽然不是很好！）。我希望在鼠标移动时使用onmousemove事件获取值。但如果我使用clientX和clientY，我只能管理2个值。如何生成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]

Answer 1

你的myfunc实现在哪里？

BTW如果我使用以下代码，我可以获得值（在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);
}

使用onmousemove获取rgb颜色值

1 个答案: