在HTML5画布上创建colorpicker [英] Creating colorpicker on HTML5 canvas

问题描述

如何在HTML5画布上绘制colorpicker？

How to draw a colorpicker on HTML5 canvas?

推荐答案

一个基本的例子是使用 getImageData ： http://jsfiddle.net/eGjak/60/ 。 / p>

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

这篇关于在HTML5画布上创建colorpicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！