vue＋canvas如何实现b站萌系登录界面

当初在掘金看到那个小熊的登录页面，很多人都很喜欢，于是恬不知耻的说了一句要用canvas来实现一遍，真的是给自己立了个flag，还好结果很糟糕。

各位观众大老爷，这可能是你见过最惨淡的demo了，希望不要嫌弃

首先看看别人的效果图

进行思考

为什么小熊会跟着输入框的输入而移动。

为什么小熊的耳朵会移动到前面

小熊的移动规律是什么

做出一些逻辑上的思索与排除

2d

3d

判断文本框的焦点坐标，从而给小熊旋转等动作的数据支持

实现3d的向量类

对物体进行空间的旋转

通过输入向量与角度值，来进行计算，生成坐标在空间旋转后的坐标，此处使用的计算公式为旋转矩阵，矩阵并未单独抽离为单独类。

形状类

看过上一篇2d向量讲解的会知道，我们在使用向量来处理时，是要对每一个向量点进行处理，所以我们没法直接使用如fillRect等的方法，这里我使用了贝兹曲线来绘制图形。

我们通过捕获paths中的向量，生成一个面，然后由面去构成物体，并且在同一形状中进行面重排，是为了使面在绘制的时候依据z(深度)来进行渲染，产生遮挡的效果。

这样我们将可以通过如下方式来创建形状

对于这种绘制的最快方法，就是先在纸面上进行坐标绘制，再用代码实现。

实现了绘制与变换之后，下一步就是进行交互，这里我使用vue来写的页面，通过监听输入框的文本长度来计算,（文本的长度*字体的大小）+左边距=焦点坐标。

然后我们就可以把所有的东西交给浏览器了

不足

画的有点丑，不太可以很清晰的有那种感觉

只对单个物体进行了深度渲染，未实现空间深度的渲染

向量与形状的功能不完善，使得效果局限性很大

这是未输入时的样子，为了对比明显，我讲旋转的角度调大了

源码链接：https://github.com/dxiaoqi/canvas-svg-/tree/master/canvas/vue%2B3d%E4%BA%A4%E4%BA%92

总结

其实这东西挺不好做的，以前用PS或者AE做动效的时候，只想着如何来美化效果，动手实现之后才感觉图形引擎那群人真的牛逼，从开始打算做到简单实现，花了接近半天，中间推倒了很多想法，然后再去整理，虽然最后的效果不怎么样，但是吧，我还是恬不知耻希望可以诱惑到一些大佬们加入canvas的队伍中，一起来写有趣的东西。

素材来源于网络，版权属于原作者

原链接地址：https://juejin.im/post/5ae802a46fb9a07ac55fec04

点击这里，

申请免费前端课程