在HTML5画布上创建colorPicker

如何在HTML5画布上绘制colorpicker？在HTML5画布上创建colorPicker

2011-07-25 Mark

考虑到您的问题的详尽阐述，答案可能是：“使用for循环”。你能告诉我们你已经尝试过了吗？ – MeLight

一个基本的例子是使用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()); 
});

来源

2011-07-25 16:18:56 pimvdb

我知道如何提取当前颜色，我不知道如何绘制它。 – Mark

您必须手动绘制颜色。然后，您需要听取该区域的鼠标点击，然后在点击位置获取颜色。

最大的问题是如何绘制颜色。 Drawing Color Spectrums中有几个例子。

来源

2011-07-25 16:10:00 Jonas

我在HCT上为您创建了一个解决方案。你可以在这里看到：

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

的想法是找到你喜欢的颜色选择器图像，然后画在画布上。在mousedown事件中，我们可以获取鼠标坐标，然后使用颜色选择器图像的图像数据挑选出颜色。

希望这会有所帮助！

来源

2011-09-20 03:32:30

在HTML5画布上创建colorPicker

回答

相关问题