[英]Javascript colorbar - best way to create it
I have a list of colours ( created from values ) and want to display them in a colourbar (as a legend what each colour means). 我有一个颜色列表( 从值创建 ),并希望在颜色栏中显示它们(作为图例,每种颜色的含义)。 Something like this. 像这样的东西。
One way would be a table with 1 row / n columns (n = 25-100), each column representing one colour. 一种方法是具有1行/ n列(n = 25-100)的表,每列代表一种颜色。 Is there any better way to do this? 有没有更好的方法来做到这一点?
Canvas is a powerful API for this: http://jsfiddle.net/pimvdb/eGjak/89/ . 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] + ')');
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.