刚刚在开车群看到一个好玩的动图

正好新年也快到了，给家人做个“过年红包刮刮乐”的页面，增加点年味不也挺好。

说做就做，这里我们用canvas2D来实现效果，核心的API是 CanvasRenderingContext2D.globalCompositeOperation，主要是用来设定图形绘制前后的图层混合模式，详见该页。简单加上自己的理解翻译下：（ps：source 是将要绘制的图形，destination是指画布上已存在的图形）

想给自己的网站写一个404、500之类的错误页，光放仨数字太丑，想着有什么办法漂亮地动起来，于是想起来以前做过一个破碎的粒子合并成文字的效果，就拿来使了。但是当初做的时候没有考虑性能上的问题，于是这次重构了一遍，所以本篇博客的重点不是动画效果，而是性能优化。

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

效果如下：

原理：

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

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

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

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

概述：

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

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

群里跟人斗图的时候，有没有碰到这样的？

这时候没有图咋办？总不能真退群啊，但是又没图可以斗，于是乎~

唉，尴尬不尴尬，斗图拼的就是时效性，等你找到，黄花菜都凉了。于是乎，这篇博客就应运而生了

我会那么肤浅，直接把文字贴到图片上就算了？

你是喜欢下左边的图当表情还是右边的图？

是我就选右边，为啥？当然是因为高清的表情包是没有灵魂的，咳咳，当然是因为这个啦

今天玩一些新的东西，大家都没有看过这样的视频：

bad apple 字符版

或者 这样的图片：

网上有很多生成这种图片/视频的工具，但是每个程序员都有一颗造轮子的心，我们当然要玩出自己的花样啦。老规矩，还是先讲原理，建议先用自己的方式实现一遍。原理很简单首先准备一组排好序的不同 “着色密度 ” 的ascii字符（事实上你可以用任何字符），比如 #KDGLftji+;,:. ，接着将源图转为灰度图，然后遍历图中的像素，根据r/g/b通道的值来匹配字符串中相应 “着色密度 ” 的字符，值越小则颜色越深，字符的“密度”也应越大。如果需要保留颜色，只需将灰度图和原图的像素位置一一对应即可。在开始实现功能之前，我们需要先了解一下颜色矩阵（ColorMatrix）。在计算机中，每个像素的颜色可以用一个向量（有的文章也叫矢量或分量）矩阵表示：[R, G, B, A]。颜色变换矩阵通常是用一个5x5的矩阵来表示，和空间中一个n维向量的平移变换需要用一个n+1维的矩阵来表示一样，颜色矩阵也需要引入一个齐次坐标来进行“平移操作”。以下是一些常见的颜色变换矩阵：

<canvas>元素是众多广泛使用的网络2D图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而，随着网站和应用将canvas画布推至极限，性能开始成为问题。此文目标是给使用canvas画布元素的优化带来建议，去保证你的网站或者应用表现卓越。

本讲我们在上一讲的基础上，给旗子添加高光，使其看起来更加有立体感。我会用两种方式来分别实现这个效果，然后比较一下优劣，还是先讲原理。

方法一：在原来的代码drawImage之后通过 fillRect 函数来增加一个白色蒙层，通过透明度的递增和递减来模拟。具体多少透明度？当然你可以用数学的方法来求导计算出某一点的斜率，根据其大小和正负得出其透明度大小，斜率越大，透明度越小。这里用一种更取巧也效率更高的方法，即保存某一点前一个点的y轴坐标，与该点的y坐标相减，即可得到斜率的相对大小，因为两点之间的x轴上距离都是1px，所以y轴变化越大，|斜率|则越大。

这里是本系列的第二讲，上一讲不知道大家自己试过了没，虽然整体效果差强人意但是并不算完美。本讲我们先用那个canvas2D把上一讲的效果实现一遍。

还是先讲原理，动手能力强的童鞋可以看了原理自己去鼓捣。
设有三角函数 y = Asin(ωx+φ) ，

1. 第一步，我们要先利用高中的三角函数知识来计算出旗帜飘动（类似简谐运动）的第一帧 (设初相φ=0) 的曲线，
   假设我们有一张图片，宽高分别为W、H，该图片包含n个周期，最大振幅为A，可得波长 λ = W / n ，ω = 2π / λ ，即可得出我们的三角函数：y = A · sin( 2π / λ · x ) ；
2. 第二步，在W次循环中（逐像素），使用drawImage函数 来画出宽度1，高度H 的图片。