目录
前言
一、RGB的相关知识
1、RGB的基本原理
2、RGB的数值表示
3、应用场景
二、ColorMap生成实战
1、外部库介绍
2、相关API
3、实例生成
三、总结
前言
在现代网页开发与数据可视化领域，色彩的表现力对于信息传达和视觉体验起着至关重要的作用。色带，作为一种有效的色彩组织和展示形式，广泛应用于科学研究、工程绘图、地理信息系统（GIS）以及商业数据展示等多个领域。它能够将数据值映射到特定的颜色，从而使得复杂的数据分布以直观的视觉形式呈现出来。如下图的应用：
比如在常见的科研工具中，Matlab作为一款功能强大的科学计算与可视化软件，在色带生成与应用方面拥有成熟且便捷的工具集。其内置的多种色带模式以及灵活的自定义选项，为科研人员和工程师提供了高效的数据可视化解决方案。然而，随着互联网技术的发展和Web应用的普及，越来越多的数据可视化需求开始转向网页平台。Html5作为现代网页开发的核心标准，提供了丰富的绘图和渲染功能，使得在网页上实现复杂的图形和图像处理成为可能。
在实践过程中，开发者可能会面临一些挑战。例如，Matlab和Html5在色彩处理和图形绘制方面存在一定的差异，如何准确地将Matlab的色带效果转化为Html5中的实现是一个需要解决的问题。此外，不同浏览器对Html5和CSS3特性的支持程度不一致，可能导致色带在某些浏览器中显示异常，需要进行充分的兼容性测试和优化。总之，在Html5中仿Matlab自定义色带生成实践，为网页数据可视化提供了一种新的思路和方法。通过深入理解Matlab色带的原理和巧妙运用Html5的绘图功能，开发者能够在网页上实现具有专业水准的色彩效果，满足多样化的数据展示需求。随着技术的不断进步和开发者的不断创新，这一领域的应用前景将更加广阔。本文即在此背景下产生，文章主要讲解如何在Html5中生成类似Matlab的色带应用，通过本文您可以熟悉并掌握生成方法，为下一步进行gis的空间自定义分类制图打下颜色制图的基础。
一、RGB的相关知识
在数字媒体、计算机图形学以及现代显示技术等领域，RGB颜色模型作为色彩表示与呈现的核心手段，发挥着至关重要的作用。RGB颜色模型基于光的加色原理，通过红（Red）、绿（Green）、蓝（Blue）三种基本色光的强度组合，能够产生人类视觉所能感知的绝大多数颜色，为我们在屏幕上创造出丰富多彩的视觉体验提供了可能。
1、RGB的基本原理
RGB颜色模型源于人类视觉系统对红、绿、蓝三种光的敏感性。这三种颜色被称为光的三原色，因为它们无法通过其他颜色的混合得到，但却可以组合生成其他各种颜色。在数字设备中，如显示器、手机屏幕等，每个像素点都由红、绿、蓝三种子像素组成，通过调整这三种子像素的亮度，就能控制该像素点最终显示的颜色。例如，当红、绿、蓝三种子像素的亮度都达到最大时，像素点呈现为白色；当三种子像素的亮度都为零时，像素点则为黑色。
2、RGB的数值表示
在RGB颜色模型中，每种基本颜色的强度通常用0到255之间的整数来表示。0表示该颜色完全不发光，255表示该颜色以最大强度发光。因此，一个完整的RGB颜色值由三个数值组成，分别对应红、绿、蓝三种颜色的强度。例如，RGB（255,0,0）表示纯红色，RGB（0,255,0）表示纯绿色，RGB（0,0,255）表示纯蓝色。而RGB（255,255,255）则表示白色，RGB（0,0,0）表示黑色。这种数值表示方法使得计算机能够方便地存储、处理和传输颜色信息，为数字图像的处理和显示提供了基础。在Html网页中，我们可以打开颜色拾取器，通过颜色拾取器可以看到颜色的RGB值，查看方法如下：
通过颜色拾取器就能实现。 如果当前您的网页是展示的是Hex表示的颜色，通过上下键可以切换不同的展示模式，通过切换后就可以实现RGB格式的颜色展示模式。
3、应用场景
RGB颜色模型在现代科技和日常生活中有着广泛的应用。在计算机显示器、电视屏幕、手机显示屏等电子设备上，RGB是默认的颜色标准，所有的图像、视频和用户界面元素都是基于RGB颜色模型来设计和显示的。在网页设计和网络媒体中，RGB颜色模型也是主要的颜色表示方式，通过HTML和CSS代码中的RGB值设置，可以精确控制网页元素的颜色，实现各种视觉效果。此外，在摄影、影视制作、数字绘画等领域，创作者们也依赖RGB颜色模型来呈现他们的作品，通过调整RGB值来实现理想的色彩效果和艺术风格。
二、ColorMap生成实战
在介绍了有关于Html中RGB的颜色生成原理、数值表示以及应用场景之后。本节将中点来讲解如何基于Javascript的色带生成。这里需要使用一个外部的Javascript，这个是生成色带的关键代码。其次重点介绍这个API库，最后根据API生成相关的具体示例。通过这些实例的生成，让你对整个过程有更详细的了解。
1、外部库介绍
生成色带的Javascript源码本身不复杂，这里直接将整个生成的源码库代码贴出来，
/*** Colormaps.js - a general set of utilities for dealing with colors and stuff* Author: Yue Zhang* */function ColorScheme(name, minValue, maxValue, minr, maxr, ming, maxg, minb, maxb) {this.name = name;this.minValue = minValue;this.maxValue = maxValue;this.minr = minr;this.maxr = maxr;this.ming = ming;this.maxg = maxg;this.minb = minb;this.maxb = maxb;
}function Color(r, g, b) {this.r = r;this.g = g;this.b = b;
}Color.prototype.toString = function() {return "rgb("+parseInt(this.r)+","+parseInt(this.g)+","+parseInt(this.b)+")";
}Color.prototype.toHex = function() {var r = parseInt(this.r);var g = parseInt(this.g);var b = parseInt(this.b);
}function MultiColorScheme(name, minValue, maxValue, colors) {this.name = name;this.minValue = minValue;this.maxValue = maxValue;this.colors = colors;//colorStops is the locations of each color on the gradient.this.colorStops = [];for (var i = 0; i<this.colors.length; i++) {this.colorStops = this.colorStops.concat(i*(maxValue-minValue)/(this.colors.length-1));}
}/*** Given a value, and the min and max of that value, returns the color that* corresponds to that value for the given colorScheme.* */
function makeMultiColor(value, min, max, colorScheme) {var colors = colorScheme.colors;var colorStops = [];for (var i = 0; i<colorScheme.colors.length; i++) {colorStops = colorStops.concat(min + i*(max - min)/(colors.length-1));}for (var i = 1; i<colorScheme.colors.length; i++) {if (value <= colorStops[i]+0.01 && value >= colorStops[i-1]) {var cMin = colorStops[i-1];var cMax = colorStops[i];var r = interpolate(value, cMin, cMax, colors[i-1].r, colors[i].r);var g = interpolate(value, cMin, cMax, colors[i-1].g, colors[i].g);var b = interpolate(value, cMin, cMax, colors[i-1].b, colors[i].b);return "rgb("+parseInt(r)+","+parseInt(g)+","+parseInt(b)+")";}}return "rgb(255,255,255)";
}function HeatMap(name, values){this.name = name;this.values = values;this.colors = [];this.xpos = 0;this.ypos = 0;
}function interpolate(pos1, min1, max1, min2, max2) {return (max2-min2)*(pos1-min1)/(max1-min1)+min2;
}/**
* Given a value and the min and max possible values for that value,
* returns a color that represents the color in the color scheme.
* */
function makeColor(value, min, max, colorScheme) {if (colorScheme instanceof MultiColorScheme) {return makeMultiColor(value, min, max, colorScheme);}else {var colorR = interpolate(value, min, max,colorScheme.minr, colorScheme.maxr);var colorG = interpolate(value, min, max,colorScheme.ming, colorScheme.maxg);var colorB = interpolate(value, min, max,colorScheme.minb, colorScheme.maxb);//Colors have to be intsreturn "rgb("+parseInt(colorR)+","+parseInt(colorG)+","+parseInt(colorB)+")";}
}/**
* Given a heat map without colors
* and a color scheme, gives the heat map colors.
* */
function makeColors(heatMap, colorScheme) {for (var i = 0; i<heatMap.values.length; i++) {if (LOGARITHMIC) {heatMap.values[i] = Math.log(heatMap.values[i])/Math.log(2);}var value = heatMap.values[i];var color = makeColor(value, colorScheme.minValue, colorScheme.maxValue,colorScheme);//if the value is not positive, the color is white.if (value <= 0) {heatMap.colors = heatMap.colors.concat("rgb(255,255,255)");}else {//Colors have to be intsheatMap.colors = heatMap.colors.concat(color);}}
}/**
* Draws a color map for the given color scheme onto the given canvas.
* */
function drawColorMap(canvas, colorScheme, maxValue, minValue) {var context = canvas.getContext('2d');context.clearRect(0, 0, canvas.width, canvas.height);var width = canvas.width;var height = canvas.height;var gradient = context.createLinearGradient(0, 0, width, 0);if (colorScheme instanceof MultiColorScheme) {for (var i = 0; i<colorScheme.colorStops.length; i++) {gradient.addColorStop(colorScheme.colorStops[i]/colorScheme.maxValue, colorScheme.colors[i].toString());}}else {gradient.addColorStop(0, makeColor(0, 0, width, colorScheme));gradient.addColorStop(1, makeColor(width, 0, width, colorScheme));}context.fillStyle = gradient;//context.fillRect(0, 0, width, height/2);context.fillRect(0, 0, width, height);//writing textcontext.fillStyle = "rgb(0,0,0)";
}//GLOBAL color schemes
//Red is high, green is low
var GREEN_RED_SCHEME = new ColorScheme('redGreen', 0, 1000, 0, 255, 255, 0, 0, 0);
//Red is high, blue is low
var BLUE_RED_SCHEME = new ColorScheme('blueRed', 0, 1000, 0, 255, 0, 0, 255, 0);
//Red is high, yellow is low
var YELLOW_RED_SCHEME = new ColorScheme('yellowRed', 0, 1000, 255, 255, 255, 0, 0, 0);
//Blue is high, white is low
var WHITE_BLUE_SCHEME = new ColorScheme('whiteBlue', 0, 1000, 255, 0, 255, 0, 255, 255);
//Green is high, blue is low
var BLUE_GREEN_SCHEME = new ColorScheme('blueGreen', 0, 1000, 0, 0, 0, 255, 255, 0);
//White, yellow, red, black color scheme
var YELLOW_RED_BLACK_SCHEME = new MultiColorScheme('', 0, 1000, [new Color(255,255,0),new Color(255,0,0),new Color(0,0,0)]);
var BLUE_WHITE_RED_SCHEME = new MultiColorScheme('', 0, 1000,[new Color(255, 0, 0),new Color(255, 255, 255),new Color(0, 0, 255)]);
var BLUE_GREEN_YELLOW_RED_SCHEME = new MultiColorScheme('', 0, 1000,[new Color(0, 0, 255),new Color(0, 255, 255),new Color(0, 255, 0),new Color(255,255,0),new Color(255,0,0)]);var colorSchemes = {'GREEN_RED_SCHEME':GREEN_RED_SCHEME, 'BLUE_RED_SCHEME':BLUE_RED_SCHEME,
'YELLOW_RED_SCHEME':YELLOW_RED_SCHEME, 'WHITE_BLUE_SCHEME':WHITE_BLUE_SCHEME,
'BLUE_GREEN_SCHEME':BLUE_GREEN_SCHEME,
'YELLOW_RED_BLACK_SCHEME':YELLOW_RED_BLACK_SCHEME,
'BLUE_GREEN_YELLOW_RED_SCHEME':BLUE_GREEN_YELLOW_RED_SCHEME,
'BLUE_WHITE_RED_SCHEME': BLUE_WHITE_RED_SCHEME};
2、相关API
在上面的方法中，有几个地方是重点需要注意的。第一个是通过RGB来构建Color对象。在Javascript代码中传入RGB值构建的代码如下：
function Color(r, g, b) {this.r = r;this.g = g;this.b = b;
}其次是根据自定义的颜色及分区来构建渐变的色带，关键方法如下：
function MultiColorScheme(name, minValue, maxValue, colors) {this.name = name;this.minValue = minValue;this.maxValue = maxValue;this.colors = colors;//colorStops is the locations of each color on the gradient.this.colorStops = [];for (var i = 0; i<this.colors.length; i++) {this.colorStops = this.colorStops.concat(i*(maxValue-minValue)/(this.colors.length-1));}
}需要注意的是，这里传入的colors数组即是前面通过RGB值构建出来的颜色数组，生成之后就是我们期望的色带值。 为了直观的展示色带的生成效果，我们在Html5中将根据色带的渐变色去填充canvas，以此来进行效果的展示。使用色带来填充canvas的方法如下：
/**
* Draws a color map for the given color scheme onto the given canvas.
* */
function drawColorMap(canvas, colorScheme, maxValue, minValue) {var context = canvas.getContext('2d');context.clearRect(0, 0, canvas.width, canvas.height);var width = canvas.width;var height = canvas.height;var gradient = context.createLinearGradient(0, 0, width, 0);if (colorScheme instanceof MultiColorScheme) {for (var i = 0; i<colorScheme.colorStops.length; i++) {gradient.addColorStop(colorScheme.colorStops[i]/colorScheme.maxValue, colorScheme.colors[i].toString());}}else {gradient.addColorStop(0, makeColor(0, 0, width, colorScheme));gradient.addColorStop(1, makeColor(width, 0, width, colorScheme));}context.fillStyle = gradient;context.fillRect(0, 0, width, height);context.fillStyle = "rgb(0,0,0)";
}3、实例生成
最后我们新建一个Html，在这个Html中将使用一个Table表格，然后在页面加载的时候，通过调用预制的色带对象来进行页面渲染，同时我们还演示了一个自定义的颜色区间生成。实例代码如下：
<!DOCTYPE html>
<html>
<head><title>colormap自定义色带生成实战</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./colormaps.js"></script><style type="text/css">body {margin: 0;padding: 0;}table {border-collapse: collapse;width: 95%;margin: 10px auto;}th, td {border: 1px solid black;padding: 3px;text-align: left;}th {background-color: #f2f2f2;}</style>
</head>
<body><table><tr><th width="20%">色带值</th><th width="80%">色带效果</th></tr><tr><td>GREEN_RED_SCHEME</td><td><canvas id="myCanvas" width="1024" height="40" ></canvas></td></tr><tr><td>BLUE_RED_SCHEME</td><td><canvas id="myCanvas1" width="1024" height="40" ></canvas></td></tr><tr><td>YELLOW_RED_SCHEME</td><td><canvas id="myCanvas2" width="1024" height="40" ></canvas></td></tr><tr><td>WHITE_BLUE_SCHEME</td><td><canvas id="myCanvas3" width="1024" height="40" ></canvas></td></tr><tr><td>YELLOW_RED_BLACK_SCHEME</td><td><canvas id="myCanvas4" width="1024" height="40" ></canvas></td></tr><tr><td>YELLOW_RED_SCHEME</td><td><canvas id="myCanvas5" width="1024" height="40" ></canvas></td></tr><tr><td>WHITE_BLUE_SCHEME</td><td><canvas id="myCanvas6" width="1024" height="40" ></canvas></td></tr><tr><td>YELLOW_RED_BLACK_SCHEME</td><td><canvas id="myCanvas7" width="1024" height="40" ></canvas></td></tr><tr><td>自定义1</td><td><canvas id="myCanvas8" width="1024" height="40" ></canvas></td></tr><tr><td>自定义2</td><td><canvas id="myCanvas9" width="1024" height="40" ></canvas></td></tr><tr><td>自定义3</td><td><canvas id="myCanvas10" width="1024" height="40" ></canvas></td></tr></table>
</body>
</html>
然后在页面中调用色带对象进行canvas的绑定，代码如下：
<script>window.onload = function() {console.log(colorSchemes);drawColorMap( document.getElementById('myCanvas'), GREEN_RED_SCHEME, 100, 0);drawColorMap( document.getElementById('myCanvas1'), BLUE_RED_SCHEME, 1000, 0);drawColorMap( document.getElementById('myCanvas2'), YELLOW_RED_SCHEME, 1000, 0);drawColorMap( document.getElementById('myCanvas3'), WHITE_BLUE_SCHEME, 1000, 0);drawColorMap( document.getElementById('myCanvas4'), BLUE_GREEN_SCHEME, 1000, 0);drawColorMap( document.getElementById('myCanvas5'), YELLOW_RED_BLACK_SCHEME, 1000, 0);drawColorMap( document.getElementById('myCanvas6'), BLUE_WHITE_RED_SCHEME, 1000, 0);drawColorMap( document.getElementById('myCanvas7'), BLUE_GREEN_YELLOW_RED_SCHEME, 1000, 0);drawColorMap( document.getElementById('myCanvas8'), new ColorScheme('diy1', 0, 1000, 0, 35, 2, 50, 61, 90), 1000, 0);drawColorMap( document.getElementById('myCanvas9'), new ColorScheme('diy2', 0, 1000, 190, 255, 50, 50, 61, 0), 1000, 0);drawColorMap( document.getElementById('myCanvas10'), new MultiColorScheme('', 0, 1000,[new Color(190, 27, 231),new Color(7, 229, 96),new Color(207, 10, 37)]), 1000, 0);}</script>最后呈现出来的就是如下的实际效果：
在实际开发当中，如果想从色带中获取指定值的颜色，可以通过以下方法：
通过这个方法就可以返回该值对应的RGB颜色：
makeColor(260,0,1000,GREEN_RED_SCHEME);
'rgb(66,188,0)'三、总结
以上就是本文的主要内容，文章主要讲解如何在Html5中生成类似Matlab的色带应用，通过本文您可以熟悉并掌握生成方法，为下一步进行gis的空间自定义分类制图打下颜色制图的基础。博文首先讲解了RGB的相关知识，它的数值表示以及使用场景。然后重点介绍了ColorMap的生成库及其相关的API方法，最后基于colormap构建了一个色带生成的实例，以及如何来自动生成色带。相信通过博文的内容讲解，大家对如何在Html页面中生成色带有了进一步的了解。行文仓促，定有不当之处，恳请各位专家学者博友在评论区留下宝贵的意见，万分感激。
相关源码传送门：在Html5中生成仿Matlab色带效果源码。
