这篇文章转自掘金（https://juejin.cn/post/7138346293042085924），转载到这里一方面是因为掘金的排版不习惯，一方面当做收藏方便我随时回忆

你们见过 Spotify 的年终活动吗？他们通过图像颜色处理创造了引人注目的视觉美感。

善用图形处理可以增加我们网页的逼格——过滤器filter就能通过动态串联的方式帮我们在浏览器做到这一点。

CSS 与 SVG

今年早些时候，我推出了CSSgram，这是一个纯 CSS 库，它使用过滤器和混合模式来创建图片过滤器。

现在，这可以通过修补和混合模式来完成——但CSS过滤器有一个巨大的缺点：它无法控制RGBA通道。但是SVG的feColorMatrix弥补了这个不足。

之前有一篇博客试过使用 JavaScript生成字符画，但是最终没有实现gif转字画符，事实上用当时说的方法：把gif每帧抽取出来，然后绘制到canvas上即可。

不过这次要说的实现方式并非js，而是纯css实现，核心的属性是background-clip 和text-fill-color ，由于这俩属性目前并没有被纳入标准，所以需要加上 -webkit-前缀。当初发现这个属性是真的像发现了个宝藏，通过它们的组合可以实现非常多有意思的效果。前者用于对背景裁剪，后者用于和背景颜色叠加。

于是就有了下图的效果（背景是一张动图，然后使用文字对背景进行裁剪。字体透明填充，与背景叠加）

原理：

① 定义一个数组，数组里面包含每张图片的引用以及它们进入、进入完成、离开、完成离开时的百分比

② 监听页面滚动，算出当前的滚动进度

③ 遍历数组，根据当前进度修改图片的状态，修改图片的–progress属性值

想必大家应该都见过类似这种字幕往下边叠的视频截图

一般的做法都是自己把视频某几帧截图，然后用作图工具裁剪/覆盖之类的方式来制作出来。但是作为一个程序员，当然要思考一下效率更高的方式啊，于是就有了这篇博客。

最近一直在补线代的理论，边学边用代码实现里面的知识点。但是学习知识的目的总归是为了运用到工作和生活中去，为了不让这个过程太枯燥，试着利用目前复习的线代基础知识，做一个小demo。思考良久，决定实现一下Spine、live2D、龙骨这些工具的网格变换功能。开干！

效果如下：

原理：

①把图片水平垂直分成m×n份，每份沿对角线划分出两个三角形；

定义

由 m × n 个数aij排成的m行n列的数表称为m行n列的矩阵，简称m × n矩阵。记作：

矩阵是一个向量组（m个n维向量或n个m维向量）

特殊矩阵

同型矩阵

两个或者两个以上的矩阵的行数和列数都相同，那么我们就说这两个或两个以上的矩阵是同型矩阵。

二阶行列式

由两个二维向量组成，其结果为以这两个向量为领边的平行四边形的面积

n级排列

由1，2，…，n组成的一个有序数组称为一个n级排列。
例如，2431是一个四级排列，45321是一个五级排列。
注：n级排列的总数是 n(n-1)(n-2)…1=n!

想要在markdown文档里画一个树状图，但是手码又太累，于是就搞了这个玩意，纯当娱乐~

首先画一张“九宫格”树状图

觉得不好看可以自己画，只要包含这11种状态：首部、中部、尾部的叶子节点，首部、中部、尾部的非叶子节点以及每个节点的展开/收起状态，根节点的展开/收起状态。

学编程的小伙伴或多或少都写过贪吃蛇这个小游戏吧，核心的算法就是通过数组来维护蛇的移动和增长。具体实现方式：

地图：一个 M x N 的网格，每次移动的距离都是网格尺寸的 k 倍

移动：根据键盘按下的移动方向算出蛇头的位置，添加到数组顶部（unshift），同时移除数组的最后一个元素

文章里面的东西虽然涉及了人工智能，但是还是选择投在了前端的版块，一来延续上一遍的内容，二来自己对AI这块连入门都算不上，避免被众大佬嗤笑，但是也欢迎大佬们说出里面的纰漏和不严谨的地方，3Q (〃’▽’〃)

上个教程讲了深度贴图的其中一个应用——生成3D效果的图片。这篇文章称热打铁，说下如何获取深度贴图吧。

海外党玩F***book的时候可能有接触过这个酷炫的3d图片效果：

只要通过客户端的这个入口——

或者网页版的这个入口——

就能生成。不知道咋玩的请参考官方的帮助手册
。今天就教大家手撸出一个这样的功能，不要担心，所有代码加起来不超过200行并且不使用任何第三方库。虽然canvas2D也能做出这个效果，但是基于这种像素级操作的性能考虑，WebGL显然是更好的方案，我前面的有些教程也用到了WebGL，核心的API我就不做过多介绍，直接详细地注释在最终的代码里面了，代码仍然使用WebGL
1.0版本。

概述：

在计算机图形学的一众效果中，水波效果无疑非常能引起观众眼球。这是一种模拟了水在受到干扰时的行为。

本文由两部分组成。第一部分讲述如何模拟水的行为。第二部分介绍光线到达透明表面时如何折射。通过这两部分知识可以写出效果瞩目的程序。

1）浏览器缓存策略

浏览器每次发起请求时，先在本地缓存中查找结果以及缓存标识，根据缓存标识来判断是否使用本地缓存。如果缓存有效，则使
用本地缓存；否则，则向服务器发起请求并携带缓存标识。根据是否需向服务器发起HTTP请求，将缓存过程划分为两个部分：
强制缓存和协商缓存，强缓优先于协商缓存。

算法（Algorithm）是指用来操作数据、解决程序问题的一组方法。对于同一个问题，使用不同的算法，也许最终得到的结果是一样的，比如排序就有前面的十大经典排序和几种奇葩排序，虽然结果相同，但在过程中消耗的资源和时间却会有很大的区别，比如快速排序与猴子排序：）。

那么我们应该如何去衡量不同算法之间的优劣呢？

主要还是从算法所占用的「时间」和「空间」两个维度去考量。

• 时间维度：是指执行当前算法所消耗的时间，我们通常用「时间复杂度」来描述。

• 空间维度：是指执行当前算法需要占用多少内存空间，我们通常用「空间复杂度」来描述。

Git 作为一个源码管理系统，不可避免涉及到多人协作。

协作必须有一个规范的工作流程，让大家有效地合作，使得项目井井有条地发展下去。”工作流程”在英语里，叫做”workflow”或者”flow”
，原意是水流，比喻项目像水流那样，顺畅、自然地向前流动，不会发生冲击、对撞、甚至漩涡。

已知矩形，坐标(x,y)，宽width，高height，当前放大倍数为n。此时光标位置(a,b)，光标相对矩形的位置(a-x,b-y)，在该位置对矩形放大到原尺寸的m倍。

设矩形的缩放中心在矩形左上角，则放大后：

1
2

x = a - (a - x) / n * m
y = b - (b - y) / n * m

虽然使用CSS给SVG添加动画很方便，但是并非所有可以动的svg属性都能通过CSS来设置动画，就比如所有定义元素实际形状的属性，你可以通过SMIL（Synchronized Multimedia Integration Language）为它们设置动画，都无法通过CSS来做到。Sara Soueidan在她的SMIL动画指南中对此进行了介绍，

ps：这篇文章全部通过SMIL来对SVG形变。SMIL的前途未卜（译者注：chrome已经不推荐使用），如果您对形变动画很感兴趣，我建议你使用GreenSock的MorphSVG插件，它不需要用到SMIL，而且功能更强大，因为它进行任意形变而不用考虑锚点数量、位置、形状类型已经兼容性问题。

今天介绍下 Chrome dev tools 家族的一个小兄弟，它在 Chrome 57 之前叫作「Timeline」，而现在换了个更长的马甲 ——
「Performance」，毕竟名字要「长～～～～～～～～～」更能吸引注意。

也许你曾不经意启动过这个工具，看见里面五颜六色的图表后和我一样头晕目眩。但今天介绍完它后，我相信你能像熟悉瑞士军刀一样熟悉它。