Creating colorpicker on HTML5 canvas

问题

How to draw a colorpicker on HTML5 canvas?

回答1:

A basic example would be using getImageData: http://jsfiddle.net/eGjak/60/.

var ctx = $('#cv').get(0).getContext('2d');

for(var i = 0; i < 30; i++) {
    for(var j = 0; j < 30; j++) {
        ctx.fillStyle = 'rgb(' + 
            ((i/30*255)|0) + ',' + 
            ((j/30*255)|0) + ',' +
            '0)';

        ctx.fillRect(i * 10, j * 10, 10, 10);
    }
}

$('#cv').click(function(e) {
    // get pixel under mouse cursor
    var data = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;
    alert('rgb: ' + [].slice.call(data, 0, 3).join());
});

回答2:

I created a solution for you on HCT. You can see it here:

http://www.html5canvastutorials.com/labs/html5-canvas-color-picker/

The idea is to find a color picker image that you like and then draw it on the canvas. On the mousedown event, we can get the mouse coordinates and then use the image data of the color picker image to pick out the color.

Hope this helps!

回答3:

You have to draw the colors manually. Then you need to listen for mouseclick in that area, and then get the color at the click position.

The biggest problem is how to draw the colors. There are a few examples in Drawing Color Spectrums.

来源：https://stackoverflow.com/questions/6819034/creating-colorpicker-on-html5-canvas