【Canvas杂谈：第一季】你别告诉我你只能贴矩形的图...

[hongru]

这一期，我们会讲点有趣的事情。
我相信会有同学感兴趣。

我们都知道，canvas的context2d中有一个drawImage的api。这是个很重要的api，尤其是做游戏类需要大量素材渲染的应用。

我们先不说drawImage这个api的参数可以有3个，有5个，也可以有9个。它的第一个参数可以是img，也可以是canvas，甚至可以值video。这些细节我们放到以后的某个话题来说。

我们今天的话题跟drawImage有关系，但有些特殊的地方。首先看下面的例子：

这是一张普通的图片，drawImage可以方便的把这张图画到canvas画布上。可是如果我想要的不是简单的规整矩形的图像，而是一个不规则四边形呢？比如这样。。。

不妨请各位同学想想，你看到这个需求后脑海里最直接的方案是什么呢？？

好，我们今天的话题就是这个。。。它不是无稽的需求哦，在这个不规则4边形的基础上，我们可以做很多好玩儿的事情，这个后面再说 :) [吐舌头]

小编这里有一个
Demo
同学们可以点进去看一下，拉升4个角，看这张图片是以怎样的形态填充被你拉升的不规则4边形的。

接下来小编会说说自己的实现方案，“授人以鱼不如授人以渔”
这个实现跟还跟

• transform
• clip
  有关系。

---

我们先说说transform . 有关canvas的 transform ,6个参数释义如下：

每个参数单独看都很容易理解，但是当有不同的参数组合时，就蛮难有直观的想象了。详见这里

小编这里有个可以直观看到transform对绘制矩形影响的 Demo ,大概下面这个样子

接下来，同学们通过这个demo就大概可以看到，drawImage 结合 transform 就已经可以做到**“平行四边形”**的图片了。

注意是平行四边形 而不是我们最开始说的任意四边形。

那么，怎么做到任意四边形的图片绘制呢....别忘了还有个clip的方法没有用上。

---

第二步，我们再看看clip有什么用？怎么用？
顾名思义，clip就是“裁剪”用的。

创建一个封闭路径，然后clip一下，之后再drawImage，fill之类的操作有效的绘制区域就只在刚才创建的那个路径中了。

可以参见W3School的解释 和 Mozilla的一个Demo

其他的小编也不多说了，了解了transform和clip这两个api，接下来就是见证奇迹的时刻

---

回到最开始的那个**Demo** 。
请把 debug 那个checkbox勾上，后面那个select 选择1 ，然后你就大概可以看到类似这样的表现

小伙伴们是不是明白了什么？？

• 每个四边形总可以切分成两个三角形
• 所以我们把矩形的图片对角切分成两个三角形A和B
• 把需要填充的那个不规则四边形也对角切分成两个三角形A' 和 B'
• 接下来要做的就是把A画到A‘ 里面，B画到B’ 中

看下图：

其实不规则四边形 ABCE 可以由两个平行四边形 ABCE 和 AFCE 叠起来，取各自的一部分组合起来。

那么，

• 把矩形的图片通过drawImage 和transform 变成平行四边形 ABCE 的样子 没问题吧？
• 再加上clip 只保留 ABC 这个三角形 没问题吧？
• 同理，通过 clip + transform + drawImage 画出 三角形 ACE 也没问题吧？

如果以上的问题都有了答案，那么小编要说的方案也就差不多了。

当然，最后还有一个问题，如果你希望你的图片变不规则四边形的形变不那么厉害，有个简单的方法就是进行多次等比切分，将图片切分成一个个小矩形，不规则四边形也切分成等量的小四边形，对应着按上面的方式一个个填充就好了。

---

分割线之后，我们再来说说费了那么大劲，就搞个 矩形图片 -> 不规则四边形图片 ，这有什么价值？有什么应用场景？

小编为大家想到了一个很重要的场景：2d平面模拟3d效果的贴图。

因为3D的效果有了z方向深度，投射到2d的平面上，就会变成类似梯形,甚至不规则四边形 的形状，这个时候如果想要贴图，如果你不用webgl，小编今天说的东西就有用了 :)

Demo 1

Demo 2:一个由**普通的FishEye的效果转换成的带图片的FishEye**
~~

---

写在后面的话：

• 【Canvas杂谈】进行到第三期。小编一个人的力量一定是有限的。所以下期小编想找厉害的小伙伴来“撰稿”
• 如果你有好玩又有价值的话题，一定不要放过它。
• ATA：http://www.atatech.org/article/detail/11708/928

[06wj]

FishEye效果好赞 正好有个游戏可以用到 :)

[hongru]

@06wj 有木有兴趣来写一篇 :)

[iMusic]

太难了 哭瞎(´Д｀。)