跟月影学可视化
月影
奇虎360奇舞团团长,可视化UI框架SpriteJS核心开发者,《JavaScript王者归来》作者
立即订阅
3735 人已学习
课程目录
已更新 14 讲 / 共 45 讲
0/4登录后,你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师,还能干什么?
免费
预习 | Web前端与可视化到底有什么区别?
图形基础篇 (4讲)
01 | 浏览器中实现可视化的四种方式
02 | 指令式绘图系统:如何用Canvas绘制层次关系图?
03 | 声明式图形系统:如何用SVG图形元素绘制可视化图表?
04 | GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
数学篇 (5讲)
05 | 如何用向量和坐标系描述点和线段?
06 | 可视化中你必须要掌握的向量乘法知识
07 | 如何用向量和参数方程描述曲线?
08 | 如何利用三角剖分和向量操作描述并处理多边形?
09 | 如何用仿射变换对几何图形进行坐标变换?
视觉基础篇 (2讲)
10 | 图形系统如何表示颜色?
11 |图案生成:如何生成重复图案、分形图案以及随机效果?
特别放送 (1讲)
加餐一 | 作为一名程序员,数学到底要多好?
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

10 | 图形系统如何表示颜色?

月影 2020-07-15
你好,我是月影。从这一节课开始,我们进入一个全新的模块,开始学习视觉基础。
在可视化领域中,图形的形状和颜色信息非常重要,它们都可以用来表达数据。我们利用基本的数学方法可以绘制出各种各样的图形,通过仿射变换还能改变图形的形状、大小和位置。但关于图形的颜色,虽然在前面的课程中,我们也使用片元着色器给图形设置了不同的颜色,可这只是颜色的基本用法,Web 图形系统对颜色的支持是非常强大的。
所以这一节课,我们就来系统地学习一下,Web 图形系统中表示颜色的基本方法。我会讲四种基本的颜色表示法,分别是 RGB 和 RGBA 颜色表示法、HSL 和 HSV 颜色表示法、CIE Lab 和 CIE Lch 颜色表示法以及 Cubehelix 色盘。
不过,因为颜色表示实际上是一门非常复杂的学问,与我们自己的视觉感知以及心理学都有很大的关系,所以这节课我只会重点讲解它们的应用,不会去细说其中复杂的算法实现和规则细节。但我也会在课后给出一些拓展阅读的链接,如果你有兴趣,可以利用它们深入来学。

RGB 和 RGBA 颜色

作为前端工程师,你一定对 RGB 和 RGBA 颜色比较熟悉。在 Web 开发中,我们首选的颜色表示法就是 RGB 和 RGBA。那我们就先来说说它的应用。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(2)

  • kkopite
    简单画了下
    https://codepen.io/action-hong/pen/gOPdjze

    hsv2rgb 里传的参数的取值范围都是 (0, 1) 我一开始以为 hue的取值的按(0, 360)传的 ... 看了大半天画出来都是红色 ...
    2020-07-15
    2
  • Cailven
    提到颜色,我觉得最搞的是计算颜色之间的差值,在不同颜色系统中差值颜色完全就不一样的。
    2020-07-15
收起评论
2
返回
顶部