你们见过 Spotify 的年终活动吗？他们通过图像颜色处理创造了引人注目的视觉美感。
善用图形处理可以增加我们网页的逼格——过滤器filter就能通过动态串联的方式帮我们在浏览器做到这一点。
CSS 与 SVG
今年早些时候，我推出了CSSgram，这是一个纯 CSS 库，它使用过滤器和混合模式来创建图片过滤器。
现在，这可以通过修补和混合模式来完成——但CSS过滤器有一个巨大的缺点：它无法控制RGBA通道。但是SVG的feColorMatrix弥补了这个不足。
你们见过 Spotify 的年终活动吗？他们通过图像颜色处理创造了引人注目的视觉美感。
善用图形处理可以增加我们网页的逼格——过滤器filter就能通过动态串联的方式帮我们在浏览器做到这一点。
今年早些时候，我推出了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维向量）
两个或者两个以上的矩阵的行数和列数都相同，那么我们就说这两个或两个以上的矩阵是同型矩阵。
想要在markdown文档里画一个树状图，但是手码又太累，于是就搞了这个玩意，纯当娱乐~
觉得不好看可以自己画，只要包含这11种状态：首部、中部、尾部的叶子节点，首部、中部、尾部的非叶子节点以及每个节点的展开/收起状态，根节点的展开/收起状态。
学编程的小伙伴或多或少都写过贪吃蛇这个小游戏吧，核心的算法就是通过数组来维护蛇的移动和增长。具体实现方式：
地图：一个 M x N 的网格，每次移动的距离都是网格尺寸的 k 倍
移动：根据键盘按下的移动方向算出蛇头的位置，添加到数组顶部（unshift），同时移除数组的最后一个元素
海外党玩F***book的时候可能有接触过这个酷炫的3d图片效果：
只要通过客户端的这个入口——
或者网页版的这个入口——
就能生成。不知道咋玩的请参考官方的帮助手册
。今天就教大家手撸出一个这样的功能，不要担心，所有代码加起来不超过200行并且不使用任何第三方库。虽然canvas2D也能做出这个效果，但是基于这种像素级操作的性能考虑，WebGL显然是更好的方案，我前面的有些教程也用到了WebGL，核心的API我就不做过多介绍，直接详细地注释在最终的代码里面了，代码仍然使用WebGL
1.0版本。
已知矩形，坐标(x,y)，宽width，高height，当前放大倍数为n。此时光标位置(a,b)，光标相对矩形的位置(a-x,b-y)，在该位置对矩形放大到原尺寸的m倍。
设矩形的缩放中心在矩形左上角，则放大后：
1 | x = a - (a - x) / n * m |
虽然使用CSS给SVG添加动画很方便，但是并非所有可以动的svg属性都能通过CSS来设置动画，就比如所有定义元素实际形状的属性，你可以通过SMIL（Synchronized Multimedia Integration Language）为它们设置动画，都无法通过CSS来做到。Sara Soueidan在她的SMIL动画指南中对此进行了介绍，
ps：这篇文章全部通过SMIL来对SVG形变。SMIL的前途未卜（译者注：chrome已经不推荐使用），如果您对形变动画很感兴趣，我建议你使用GreenSock的MorphSVG插件，它不需要用到SMIL，而且功能更强大，因为它进行任意形变而不用考虑锚点数量、位置、形状类型已经兼容性问题。
群里跟人斗图的时候，有没有碰到这样的？
这时候没有图咋办？总不能真退群啊，但是又没图可以斗，于是乎~
唉，尴尬不尴尬，斗图拼的就是时效性，等你找到，黄花菜都凉了。于是乎，这篇博客就应运而生了
我会那么肤浅，直接把文字贴到图片上就算了？
你是喜欢下左边的图当表情还是右边的图？
是我就选右边，为啥？当然是因为高清的表情包是没有灵魂的，咳咳，当然是因为这个啦
日历控件基本上所有的前端都会用到，而且我相信8成的JSer都是直接把开源的组件拿来用，很多设计师似乎跟开发们也有默契，对日历控件只要能用就行，样式啥的不做太多要求，但是某些设计师就是有强迫症，一定要你按着TA的设计来，保不准产品也要舔一把火，往日历里塞些稀奇古怪的业务，咋办？初级开发可能就去网上找符合要求的控件，然后拼命说服他们；普通的开发就可能直接在已有的控件上修修补补，除了问题再回炉重造；高级的开发直接怼回去：什么J8需求，不接！顶级的程序员呢？当然是一言不合直接造轮子啊（笑。
先放最终效果，审美有限，将就着看吧~
先不管js或是jquery怎么写，咱先把日历的样子搭出来
今天玩一些新的东西，大家都没有看过这样的视频：
或者 这样的图片：
网上有很多生成这种图片/视频的工具，但是每个程序员都有一颗造轮子的心，我们当然要玩出自己的花样啦。老规矩，还是先讲原理，建议先用自己的方式实现一遍。原理很简单首先准备一组排好序的不同 “着色密度 ” 的ascii字符（事实上你可以用任何字符），比如 #KDGLftji+;,:. ，接着将源图转为灰度图，然后遍历图中的像素，根据r/g/b通道的值来匹配字符串中相应 “着色密度 ” 的字符，值越小则颜色越深，字符的“密度”也应越大。如果需要保留颜色，只需将灰度图和原图的像素位置一一对应即可。在开始实现功能之前，我们需要先了解一下颜色矩阵（ColorMatrix）。在计算机中，每个像素的颜色可以用一个向量（有的文章也叫矢量或分量）矩阵表示：[R, G, B, A]。颜色变换矩阵通常是用一个5x5的矩阵来表示，和空间中一个n维向量的平移变换需要用一个n+1维的矩阵来表示一样，颜色矩阵也需要引入一个齐次坐标来进行“平移操作”。以下是一些常见的颜色变换矩阵：
<canvas>元素是众多广泛使用的网络2D图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而，随着网站和应用将canvas画布推至极限，性能开始成为问题。此文目标是给使用canvas画布元素的优化带来建议，去保证你的网站或者应用表现卓越。
当想要确认元素的宽高时有几种属性可以选择，但是我们很难确认使用哪个属性才是最适合的。本文将帮助你做出正确的选择。
如果你需要知道元素总共占用了多少空间，包括可视内容、滚动条（如果有的话）、内边距和边框的宽度，你会使用 offsetWidth 和 offsetHeight 属性，大多数情况下，当元素没有什么形状上的变化时，他们与 getBoundingClientRect()的宽高一致。但是如果发生变化，offsetWidth和offsetHeight将返回元素的布局宽高，而getBoundingClientRect()将返回实际渲染的宽高。例如：如果元素的宽width:100px,变化transform:scale(0.5)，此时getBoundingClientRect()将返回宽50，而offsetWidth将返回宽100.
本文你将学到: