前端可视化的四种方式
简介:
可视化用一句话来说,本质上就是将数据信息组织起来后,以图形的方式进行呈现。在web上,图像通常是利用浏览器来进行绘制的。大体的方向上有4种。
第一种是传统的html+CSS,这种方式通常是普通网页用来实现页面的。
第二种是使用SVG绘制矢量图。SVG和传统的HTML+CSS的绘制方式差别不大,只不过,HTML在绘制矢量图形方面的能力有些不足,而SVG恰好弥补了这方面的缺陷。
第三种则是Canvas2D。这是浏览器提供的Canvas API其中的一张上下文,使用它,我们可以非常方便的绘制出基础的几何图形。在可视化中,canvas是非常常用的一种方法。
第四种则是WebGL。这是浏览器提供的canvas API的另外一种上下文,它是OpenGL ES规范在Web端的实现。我们可以通过它,用Gpu渲染各种复杂的2D和3D图形。WebGL利用了GPU并行处理的特性,这让他在处理大量数据展现的时候,性能要远远大于前面3种绘图方式。因此,在可视化的应用中,一些数据量大、视觉效果要求高的特殊场景,使用WebGL渲染是一种比较合适的选择。
图形系统表示颜色的几种方式,以及他们的优缺点。
在可视化中,图形的形状和颜色信息都非常重要。那么我们在web中都有哪些方法可以表示颜色。这里可以简单的划分为4类分别是RGB、RGBA颜色表示法,HSL和HSV颜色表示法,CIE Lab 和Cie Lch颜色表示法以及CubeHelix色盘。
这里我们就对前面两种方法来进行一个详细的讲解,对后面两种方法来一个简单介绍。
RGB和RGBA
RGB是颜色的16进制表示,其中RR、GG、BB分别是两位16进制数字,表示红绿蓝三种通道的色阶。色阶可以表示某个通道的强弱。理论上一共能表示2^24,也就是16777216种不同的颜色。事实上RGB并不能表示肉眼所见的所有颜色,但实际上,它已经非常丰富了。一般的显示器、彩色打印机、扫描仪等都是支持它。而RGBA则是在他的基础上添加了一个alpha的通道。
他的优点就是使用起来非常的简单。但是它有一定的缺陷。
RGB表示颜色的时候,我们只能大致的判断出他大概处于三种色阶的位置,判断它更偏向于哪种颜色,除此之外,我们就几乎得不到其他任何有用的信息。
也就是说,我们在选择一组颜色给图标时,我们并不知道需要用到什么样的规则来配置颜色,才能让不同数据对应的图形颜色变得更鲜明。
HSL和HSV
与RGB颜色以色阶表示颜色不同,HSL和HSV用色相(Hue)、饱和度(Saturation)和亮度(Lightness)或明度(Value)来表示颜色。其中Hue是角度,取值范围是0-360,饱和度和亮度/明度的值都是从0-100%,实际上他是可以取值到-100%-0。以明度/亮度来说,当我们的趋向于-100%时,图片会逐渐变黑,而趋向于100%时,则会逐渐变白。rgb和HSL直接的转换是非常复杂的,我们会在下一章,在深入的讲解他们之间的转换规则以及js实现方式。
CIE Lab 和 CIE Lch 颜色
CIE Lab 颜色空间简称 Lab,它其实就是一种符合人类感觉的色彩空间,它用 L 表示亮度,a 和 b 表示颜色对立度。RGB 值也可以 Lab 转换,但是转换规则比较复杂。就不做描述,这是一种针对人类感觉的颜色描述方式。
Cubehelix 色盘
最后,我们再来说一种特殊的颜色表示法,Cubehelix 色盘(立方螺旋色盘)。简单来说,它的原理就是在 RGB 的立方中构建一段螺旋线,让色相随着亮度增加螺旋变换。也不做过多描述。下一章我们主要讲解RGB和HSL直接互相转换的规则以及js的简单实现。
前端可视化的四种方式相关推荐
- 前端代码深浅拷贝四种方式
今天公司的实习生有问我代码怎么深拷贝 下面我就给大家整理四种前端代码深拷贝的四种方式 前端数据分为基本数据类型和引用数据类型,当我们拷贝引用数据类型的时候,我们希望改变新数组(对象)不改变原本的数组( ...
- Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
- 解决存储过程中数据安全问题的四种方式
随着科技的不断发展,数据量也正在呈指数倍的增加.在这样一个大背景下,存储产品成为了时下市场中最热的产品.而数据的安全性也变得尤为重要.后端存储已经逐渐成为企业业务系统的核心和关键. 一般而言,我们有四 ...
- angular cli 切换 css_漫谈 Angular 定制主题的四种方式
主题定制是提升用户体验最常见的一种,前端框架众多,主题定制方式却异曲同工,下面来介绍一下 Angular 中实现主题定制的四种方式. 1. webpack loader React 版本的 Ant D ...
- 深入解析react关于事件绑定this的四种方式
这篇文章主要介绍了详解react关于事件绑定this的四种方式,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 在react组件中,每个方法的上下 ...
- 大数据可视化python_大数据分析之Python数据可视化的四种简易方法
本篇文章探讨了大数据分析之Python数据可视化的四种简易方法,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 数据可视化是任何数据科学或机器学习项目的一个重要组成部分 ...
- python 财务分析可视化方法_Python数据可视化的四种简易方法
Python数据可视化的四种简易方法 作者:PHPYuan 时间:2018-11-28 03:40:43 摘要: 本文讲述了热图.二维密度图.蜘蛛图.树形图这四种Python数据可视化方法. 数据可视 ...
- 引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
- session共享的四种方式
session共享的四种方式 方式一:将存储在服务端的session保存在客户端cookie中 方式二:Session放在数据库中进行共享 方式三:基于NFS的session共享 方式四:基于Key ...
- 访问数据库的四种方式
IRIS 中支持的四种方式: SQL.Objects.REST 和 GraphQL 卡济米尔·马列维奇,<运动员>(1932) > > "你当然无法理解! 习惯了 ...
最新文章
- 金山android 杀毒软件,金山手机卫士
- 算法:五分钟了解一致性hash算法
- 我的家乡-客家小山村
- Ocean的礼物(线段树单点修改)
- kali linux编辑记事本,kali linux操作系统
- hikaricp mysql_使用 HikariCP 数据源
- C++工作笔记-作用域的巧妙使用,释放堆区创建的资源
- ansible+ssh自动化运维
- echarts 柱状图如何不顶格_echarts柱状图如何中间对齐而不是底部对齐?
- 使用Python为时间序列预测创建ARIMA模型
- k8s traefik 映射外部服务,映射其他域名,映射内网其他服务
- python 俄罗斯方块ai_TKinter实现俄罗斯方块
- PC串行接口串口定义
- 小波去噪程序c语言,小波去噪c语言程序
- 《IS-IS网络设计解决方案》一第6章 最短路径优先算法6.1 SPF算法概述
- 琪琪的果园{青龙面板可跑项目之一}保姆教程
- php外语文献有哪些,外语论文参考文献
- DAVIS346动态视觉传感器
- 从外网打点到渗透内网域控 NASA
- 大三学生HTML个人网页作业作品——电影动漫言叶之庭(4页)带音乐
热门文章
- word文档无法另存为/导出pdf解决办法
- 黎活明给程序员的几个经典的忠告!
- 在vue中使用plupload上传图片到七牛(着重解决moxie is not defined问题)
- 【恩智浦杯(飞思卡尔)全国大学生智能汽车竞赛】解读部分北科技术报告图像处理内容(点到为止)
- pano2vr 6.0转换为html,全景图转换器(Pano2VR)
- 服务器cpu天梯图_2019年CPU单核跑分天梯图
- 更新至2021各省份上传服务器地址(航信、百旺、税务UK)
- 使用kaptcha快速生成验证码
- 自定义TimePicker样式,修改时分、分割线分隔冒号的字体、颜色高度等属性
- matlab四叉树分割代码,【测绘专用】 MATLAB 四叉树分割遥感图像