跟月影学可视化
月影
奇虎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讲)
加餐一 | 作为一名程序员，数学到底要多好？
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
收起评论