在HTML5画布上创建颜色选择器

Question

如何在HTML5画布上绘制颜色选择器？

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

Answer 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!

Answer 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 .