Question

我想制作一个纯粹的js rgb颜色选择器，但我得到红色和绿色的混合物。没有蓝色或紫色效果可见。

为什么我没有得到任何颜色而不是蓝色和绿色？

我怎么能这样做？

<html>
<head>
<style>

</style>
</head>
<body>

<script type="text/javascript">
        var Canvas = document.createElement('canvas');
        var i=0,j=0,a=0,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,j+1);
                context.stroke();
                context.closePath();
                a++;

                    if(a==256){
                a=0;
                }
                j++;
                if(j==256){
                i++;
                j=0;
                }

            }
        }


        document.body.appendChild(Canvas);

    </script>


</body>

enter image description here

Answer 1

你正在覆盖你的颜色，因为我，j正在重复自己

要获得所有可能的rgb像素颜色，您需要256张尺寸为256x256的画布。

以下是适用于单个画布的色轮示例：

enter image description here

演示：http://jsfiddle.net/m1erickson/fsn56/

var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;
var counterClockwise = false;

for(var angle=0; angle<=360; angle+=1){
    var startAngle = (angle-2)*Math.PI/180;
    var endAngle = angle * Math.PI/180;
    context.beginPath();
    context.moveTo(x, y);
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.closePath();
    context.fillStyle = 'hsl('+angle+', 100%, 50%)';
    context.fill();
}

动态rgb颜色发生器没有给出所有理想的颜色

1 个答案: