生成具有完整rgb空间的画布颜色选择器

由于RGB需要用于显示所有颜色的立方体，因此可以使用更多方式来显示所有颜色。我想要一个圆圈以彩色显示彩虹中的所有颜色，并且在单独显示其自身小2D空间中所选颜色的所有不同亮度时。生成具有完整rgb空间的画布颜色选择器

我想生成的东西，看起来这样的形象用帆布：

Color picker

我对这样的尝试：

的Javascript：

function ColorPicker(element) { 
    this.element = element; 

    this.init = function() { 
     var diameter = this.element.offsetWidth; 

     var canvas = document.createElement('canvas'); 
     canvas.height = diameter; 
     canvas.width = diameter, 
     this.canvas = canvas; 

     this.renderColorMap(); 

     element.appendChild(canvas); 

     this.setupBindings(); 
    }; 

    this.renderColorMap = function() { 
     var canvas = this.canvas; 
     var ctx = canvas.getContext('2d'); 

     var radius = canvas.width/2; 
     var toRad = (2 * Math.PI)/360; 
     var step = 1/radius; 

     ctx.clearRect(0, 0, canvas.width, canvas.height); 

     for(var i = 0; i < 360; i += step) { 
      var rad = i * toRad; 
      ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)'; 
      ctx.beginPath(); 
      ctx.moveTo(radius, radius); 
      ctx.lineTo(radius + radius * Math.cos(rad), radius + radius * Math.sin(rad)); 
      ctx.stroke(); 
     } 

     ctx.fillStyle = 'rgb(255, 255, 255)'; 
     ctx.beginPath(); 
     ctx.arc(radius, radius, radius * 0.8, 0, Math.PI * 2, true); 
     ctx.closePath(); 
     ctx.fill(); 

     // render the rainbow box here ---------- 
    }; 

    this.renderMouseCircle = function(x, y) { 
     var canvas = this.canvas; 
     var ctx = canvas.getContext('2d'); 

     ctx.strokeStyle = 'rgb(255, 255, 255)'; 
     ctx.lineWidth = '2'; 
     ctx.beginPath(); 
     ctx.arc(x, y, 10, 0, Math.PI * 2, true); 
     ctx.closePath(); 
     ctx.stroke(); 
    }; 

    this.setupBindings = function() { 
     var canvas = this.canvas; 
     var ctx = canvas.getContext('2d'); 
     var self = this; 

     canvas.addEventListener('click', function(e) { 
      var x = e.offsetX || e.clientX - this.offsetLeft; 
      var y = e.offsetY || e.clientY - this.offsetTop; 

      var imgData = ctx.getImageData(x, y, 1, 1).data; 
      var selectedColor = new Color(imgData[0], imgData[1], imgData[2]); 
      // generate this square here. 

      self.renderMouseCircle(x, y); 
     }, false); 
    }; 

    this.init(); 
} 

new ColorPicker(document.querySelector('.color-space'));

的jsfiddle：http://jsfiddle.net/yH6JE/

我hav很难弄清楚如何在中间生成这个正方形。基本上我希望最左边中间的颜色与环上的颜色相同 - 我通过点击来选择颜色。

如何生成这种类型的梯度平方？

来源

2014-01-05 Yonder

我建议将您的广场从您当前使用的布局更改为Google Chrome浏览器使用的布局，该布局看起来像http://i.imgur.com/qTMpBqt.png。你也可以吗？如果你想我可以发布你需要做的代码作为答案。 – Joeytje50

哦，是的 - 那会很好。特别是如果这会产生更干净，简单和易读的代码 – Yonder

[这是脚本]（http://jsfiddle.net/Ukeeb/1/）。它使用更传统的拾色器布局。 – Joeytje50

它看起来像你想要一个HSL颜色矩形，从色轮中选择色调。

这里是一个函数我放在一起绘制矩形：

function draw(canvas, hue){ 
    var ctx = canvas.getContext('2d'); 
    for(row=0; row<100; row++){ 
     var grad = ctx.createLinearGradient(0, 0, 100,0); 
     grad.addColorStop(0, 'hsl('+hue+', 100%, '+(100-row)+'%)'); 
     grad.addColorStop(1, 'hsl('+hue+', 0%, '+(100-row)+'%)'); 
     ctx.fillStyle=grad; 
     ctx.fillRect(0, row, 100, 1); 
    } 
}

希望它你想要做什么。示例：colour rect js fiddle

来源

2014-01-05 17:50:19

如果您愿意，也可以使用圆圈。我认为以这种方式选择颜色会更容易。

我做了这个： https://github.com/JeroenvO/html5-colorpicker

也许你可以使用它作为指南。我只用了一些不透明的图像，并且没有在javascript中进行渐变计算。

来源

2014-06-30 14:14:50 Jeroen

生成具有完整rgb空间的画布颜色选择器

回答

相关问题