动态 rgb 颜色生成器没有提供所有想要的颜色答案

【问题标题】：dynamic rgb color generator not giving all desirable colors动态 rgb 颜色生成器没有提供所有想要的颜色
【发布时间】：2023-03-16 16:40:01
【问题描述】：

我想做一个纯 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>

【问题讨论】：

也许这会有所帮助：stackoverflow.com/questions/21771939/…

标签： javascript canvas colors picker

【解决方案1】：

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

要获得所有可能的 rgb 像素颜色，您需要 256 个大小为 256x256 的画布。

这是一个更适合单个画布的色轮示例：

一个演示：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();
}

【讨论】：