html 小猪佩奇代码,HTML5之canvas画小猪佩奇~

看到有知乎网友用python和css画了一个小猪佩奇，我不一样，我用JavaScript画社会人。

小猪佩奇身上纹，掌声送给社会人！

小猪佩奇原本是一部儿童动画片，但是在网友的各种调侃下，现在已经成为了社会人的标志，并且引发了众人的效仿。虽然在成年人看来是一种有趣时髦的调侃方式，但是对于还没有树立正确三观的小朋友们来说，的确会带来不良的影响。所以。。前段时间听说了抖音封杀小猪佩奇。

程序调试：我是用了html5新特性canvas，然后配合js画的。

从百度图片库随便找了张样图。。诺

由图片得知：小猪佩奇的主要由曲线构成，圆，椭圆，抛物线构成。我看到了有大佬用css的border-radius做，我小猪佩奇偏不！

有人说了，网上各种svg调试工具，可以在线画。。

那么简单，我小猪佩奇会答应吗？？于是我准备用动画效果实现，一帧一帧的画。

技术实现：是观察上面我社会人的图可知，最适合画这个图的是贝塞尔曲线，因为佩奇轮廓曲线变化多端，于是就用了三次贝塞尔曲线，

context1.bezierCurveTo(control1x,control1y,control2x,control2y,endx,endy);通过两个控制点能更加精确的画出来。

如这个头部，由一个半圆，加两条贝塞尔曲线构成，以此类推，每个部位都由若干条贝塞尔曲线构成。每条曲线找好两个控制点比较不容易，我也是用了一个晚上才画出比较平滑的曲线。其实这也是类似于ps的绘制路径。

但是，这个只能画静态图像，我小猪佩奇说好的动态图像呢！我就重写了bezierCurveTo()方法，通过每个像素控制绘画的进度，再用requestAnimationFrame()函数回调绘制方法。

最后再填充颜色：

// 皮肤颜色rgb(237,187,214);

// 描边颜色rgb(235,157,199);

// 身体颜色rgb(223,57,81);

// 身体描边rgb(159,28,76);

// 脸腮颜色rgb(249,147,213);

//鼻子颜色rgb(171,110,168)

最后，在放上整体的效果：

github源码：