在Html5中仿Matlab自定义色带生成实践

前言

一、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 ints
        return "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 ints
            heatMap.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 text
    context.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色带效果源码。