Generazione di un selezionatore di colore canvasio con spazio pieno rgb

Poiché RGB necessita di un cubo per visualizzare tutti i colors, ci sono più modi per visualizzare tutti i colors. Vorrei avere un cerchio che visualizzi tutti i colors in un arcobaleno a tutto colore – e quando fa clic su mostrare tutte le diverse luminosità per quel colore selezionato in un piccolo spazio 2D proprio.

Voglio generare qualcosa che abbia l'aspetto di questa image utilizzando la canvas:

Color Picker

Il mio tentativo per questo:

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/

Ho difficoltà a capire come generare questa piazza nel mezzo. Fondamentalmente voglio che il colore del centro di sinistra abbia lo stesso di quello sul ring – che ho scelto cliccando.

Come posso generare questo tipo di gradiente quadrato?

Sembra che si desideri un colore recto HSL, con la tonalità selezionata dalla ruota dei colors.

Ecco una function che ho messo insieme per disegnare il rect:

 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); } } 

Speriamo che faccia quello che vuoi. Esempio qui: colore rect js violino

Se vuoi, puoi anche usare un cerchio. Penso che sia più facile scegliere un colore in questo modo.

Ho fatto questo: https://github.com/JeroenvO/html5-colorpicker

Forse puoi utilizzarlo come guida. Ho usato solo immagini con qualche opacità e nessun calcolo gradiënt in javascript.