重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32881 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

CSS渲染:CSS是如何绘制颜色的?

winter 2019-04-27
你好,我是 winter,今天我们来学习一下 CSS 的渲染相关的属性。
我们在布局篇讲到,CSS 的一些属性决定了盒的位置,那么今天我讲到的属性就决定了盒如何被渲染。
按照惯例,还是先从简单得讲起,首先我们来讲讲颜色。

颜色的原理

首先我们来讲讲颜色,最常见的颜色相关的属性就是 colorbackground-color
这两个属性没什么好讲的,它们分别表示文字颜色和背景颜色,我们这里重点讲讲颜色值。

RGB 颜色

我们在计算机中,最常见的颜色表示法是 RGB 颜色,它符合光谱三原色理论:红、绿、蓝三种颜色的光可以构成所有的颜色。
为什么是这三种颜色呢?这跟人类的视神经系统相关,人类的视觉神经分别有对红、绿、蓝三种颜色敏感的类型。
顺便提一下,人类对红色的感觉最为敏感,所以危险信号提示一般会选择红色;而红绿色盲的人,就是红和绿两种神经缺失一种。其它的动物视觉跟人可能不太一样,比如皮皮虾拥有 16 种视锥细胞,所以我猜它们看到的世界一定特别精彩。
现代计算机中多用 0 - 255 的数字表示每一种颜色,这正好占据了一个字节,每一个颜色就占据三个字节。
这个数字远远超过了人体的分辨能力,因此,上世纪 90 年代刚推出这样的颜色系统的时候,它被称作真彩色。早年间还有更节约空间,但是精度更低的 16 色、256 色、8 位色和 16 位色表示法。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(10)

  • 阿成
    怎么说呢,要想完美的转换... 好难... 仅靠单像素颜色来识别出鹦鹉的轮廓还是不太可行...
    也许把周围像素的颜色考虑进去是个办法... 不过这图挺大的...

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        .bird {
          width: 400px;
          height: calc(1440 * 400 / 1920 * 1px);
        }
        canvas.bird {
          background: #ccc;
        }
      </style>
    </head>
    <body>
      <img id="img" class="bird" src="./bird.jpg">
      <canvas id="canvas" width="1920" height="1440" class="bird"></canvas>

      <script type="text/javascript">
        let canvas = document.getElementById('canvas')
        let ctx = canvas.getContext('2d')
        let img = document.getElementById('img')
        img.addEventListener('load', () => {
          ctx.drawImage(img, 0, 0)

          let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
          let data = imageData.data

          for (let i = 0; i < data.length; i += 4) {
            if (isBird(data, i, canvas.width, canvas.height)) {
              ;[data[i], data[i + 1]] = [data[i + 1] * 1.2, data[i]]
            }
          }

          ctx.putImageData(imageData, 0, 0)
        })

        function isBird (data, i, width, height) {
          let r = data[i]
          let g = data[i + 1]
          let b = data[i + 2]

          let [h, s, l] = rgb2hsl(r, g, b)
          return h < 200 && h > 80 && s > 0.23 && l < 0.84
        }

        function rgb2hsl (r, g, b) {
          let r1 = r / 255
          let g1 = g / 255
          let b1 = b / 255

          let min = Math.min(r1, g1, b1)
          let max = Math.max(r1, g1, b1)

          let l = (min + max) / 2
          let s
          let h

          if (l < 0.5) {
            s = (max - min) / (max + min)
          } else {
            s = (max - min) / (2 - max - min)
          }

          if (max === r1) {
            h = (r1 - b1) / (max - min)
          } else if (max === g1) {
            h = 2 + (b1 - r1) / (max - min)
          } else if (max === b1) {
            h = 4 + (r1 - g1) / (max - min)
          }

          h *= 60

          while (h < 0) {
            h += 360
          }

          return [h, s, l]
        }
      </script>
    </body>
    </html>
    2019-04-28
    3
    23
  • 許敲敲
    我是入门的,第一次学这个前段知识,是不是不太合适,要看第二遍才可以……
    2019-04-27
    5
  • sugar
    我来给个答案吧,乍一看 感觉需要用到很多cv领域的技术,模式识别判定轮廓,然后根据色值不同进行greenToRed转译。后来想了一下,这明明是前端的课程嘛,按cv的解决方案,难道还要把opencv编译到wasm里?转念一想,其实css滤镜就能做这事儿,试了试 几行css代码能做的事 在opencv要引一大堆库 改一大堆参数了
    2019-11-11
    2
  • Stinson
    CMYK,为什么有K,一方面是成本,另一方面是因为自然界的CMY不能合成纯黑的颜色,所以需要纯黑
    2019-07-21
    2
  • Aaaaaaaaaaayou
    canvas可以得到每个像素的rgb分量,是不是把蓝色和红色的值换一下就可以了?
    2019-04-28
    1
  • 猫总
    原本实现控制RGB范围来手动抠图,不过在使用的时候发现并不直观,调整起来很随缘,回看了一遍课程才发现重点是HSL调色,改进之后还是能比较精准(主要是直观)的把鹦鹉给单独替换颜色了
    2019-07-12
  • 无双
    请问老师,我后台用的是Tomcat服务器,前端用ajax请求静态资源时会间隔会报412,也就是一次成功进入后台,一次报412,这该怎么解决呢?
    2019-04-29
  • Geek_0bb537
    winter老师给我讲一下那个presentational attributes 看不懂
    2019-04-28
  • Izayoizuki
    HSL感觉还是绘画游戏原画之类用得多,编程领域反而挺少,无论h5游戏还是客户端游戏理解一般都是rgb/rgba
    2019-04-28
  • Mupernb
    for(var i=0;i<imgData.data.length;i++){
                    [imgData.data[4*i+0],imgData.data[4*i+1]]=[imgData.data[4*i+1],imgData.data[4*i+0]]
                }
    2019-04-28
收起评论
10
返回
顶部