Javascript colorbar - 创建它的最佳方法

【问题标题】：Javascript colorbar - best way to create itJavascript colorbar - 创建它的最佳方法
【发布时间】：2011-08-28 13:30:12
【问题描述】：

我有一个颜色列表 (created from values) 并希望在颜色栏中显示它们（作为图例，每种颜色的含义）。像这样。

一种方法是使用 1 行/n 列 (n = 25-100) 的表格，每列代表一种颜色。有没有更好的方法来做到这一点？

【问题讨论】：

使用图片，比表格好得多。鼠标指针悬停在图像上的位置将决定您正在处理的颜色。
我需要动态创建图像。我有动态创建的颜色表。

标签： javascript html

【解决方案1】：

Canvas 是一个强大的 API：http://jsfiddle.net/pimvdb/eGjak/89/。

var cv  = document.getElementById('cv'),
    ctx = cv.getContext('2d');

for(var i = 0; i <= 255; i++) { // fill strokes
    ctx.beginPath();

    var color = 'rgb(100, ' + i + ', ' + i + ')';
    ctx.fillStyle = color;

    ctx.fillRect(i * 2, 0, 2, 50);
}

cv.onclick = function(e) {
    var x = e.offsetX, // mouse x
        y = e.offsetY, // mouse y
        p = ctx.getImageData(x, y, 1, 1),
        x = p.data; // pixel at mouse (x, y) - contains [r, g, b, a]

    alert('Color: rgb(' + x[0] + ', ' + x[1] + ', ' + x[2] + ')');
};

【讨论】：

@Horst Walter：太好了，只是忘了说 IE8 不支持此功能，这可能很重要。
是的，很高兴知道，但与我的用例无关。谢谢，