老实说，

注意看，这个男人叫小何，别小看他。每天晚上 点 分 他都准时打开泡泡玛特小程序蹲守 LABUBU 抢购。就在刚才，屏幕时钟倒计时又到 :: 了他立刻开始狂戳屏幕上的「立即购买」按钮。切换「购买方式」反复刷新库存，熟练的让人心疼。

但现实却从来没有什么“功夫不负有心人”，有的只是无数“黄牛”挥舞着自己的“科技”与小何同台竞技。毫无意外今天的小何依然没有胜利，看着屏幕上的「已售罄」陷入了沉思 …，

说到痛点一。抢购体验的焦虑与失望

每一次倒计时结束后你只需要轻轻一点就能获得心仪商品，但程序往往因为流量高峰而崩溃、页面卡顿甚至直接断开连接。说起来，你会在几十秒内经历无数刷新、点击，却始终得不到成功。

至于痛点二。黄牛机器人的压制

黄牛们利用脚本、代理和多设备同步抢购，让普通使用者几乎无法与之竞争。你只能不断刷新、等待，却被自动化工具占据了先机。

痛点三的观点是。缺乏自定义前端方法

大多数前端工程师习惯只写管理后台或业务逻辑，却很少用 Canvas 或图形引擎去创造交互式作品。这导致即使你想通过代码帮助使用者更快完成购买，也缺乏可用的工具和经验。

拼尽全力也无法战胜吗？怎么说呢，

空气里漂泊着手机屏幕反射的冷光。小何指尖的汗渍在「已售罄」三个字上洇出淡淡的印子。说起来，屏幕里 LABUBU 的笑脸还在倔强——那只顶着毛茸茸耳朵、圆眼圆腮的小家伙。本该是用来治愈生活的，此刻却成了科技与欲望“厮杀”后留给普通人的一道冷疤。

技术从来都该是温柔的。当“黄牛”用它筑起壁垒时或许我该用一样的东西，造一扇窗！

我是一名前端开发工程师。不是切图仔，不是只会写管理后台，今天势必要夺回失去的一切！是的，我画了一个专属于自己的 LABUBU！

✍️ 开始创作

LeaferJS 是一款好用的 Canvas 引擎。革新的开发体验，可用于高效绘图、UI 交互、图形编辑。按理说，

而 Leafer Vue 是由 @FliPPeDround 基于 LeaferJS 创建的项目，可以使用 Vue 组件化轻松建立 Leafer 应用，具有以下特性：

• 使用 Vue 建立 Leafer 应用。高性能
• 环境统一，完全兼容 Leafer 插件
• 由 TypeScript 编写，提供强大的类型支持
• 提供在线演练场，即开即用、畅享创作

现在我们将使用 Leafer Vue 一起来完成这个作品！

一半茶叶蛋

是 LABUBU 的脑袋。 看起来有点像被切开的茶叶蛋，可以用两段二次贝塞尔曲线来绘制一个非对称椭圆表示。

import { PathCreator } from "leafer-ui";interface Point { x: number;y: number，}
/** * 以控制点 cp 为中心反射生成点 p 关于它的对称点 */
function reflect {
return {
x: p.x +,y: p.y +
};}
/** * 创建非对称椭圆方法 */
export function createBezierEllipsePath {
const cp1 = { x: p1.x + ox,y: p1.y + oy };const cp2 = { x: p2.x - ox,y: p2.y + oy };// 对了两个控制点
const cp3 = reflect;const cp4 = reflect;return new PathCreator
.moveTo
// 第 一 段贝塞尔曲线
.bezierCurveTo
// 第 二 段贝塞尔曲线
.bezierCurveTo(cp3.x。cp3.y,cp4.x,cp4.y,p1.x,p1.y)
.closePath
.path;}

const headPath = createBezierEllipsePath(
{ x:。y:
},{ x:,y:
},-);const facePath =
createBezierEllipsePath({ x:。y:
},{ x:,y:
},-,);

一个魔丸

鼻子

const nosePath =
createBezierEllipsePath({ x:。y:
},{ x:,y:
},);

嘴巴与牙齿

// 嘴巴曲线
const mouthPoints=;老实说，const mouthCurve=;// ...具体实现保持原样
function createTeethPaths(
再看count，number,toothWidth:number,toothHeight:number,curve:number){ /*...*/ }

滑稽兔耳朵

• ⛸️左外耳 E01 ,E02 。E03   

左耳外部/内部/蜗层结构细节:

图层	描述
E01	外部长椭圆

...

查看完整代码。不过，

🎉LABUBU 完成！

---

🖥️ 源码

项目完整代码请参阅 leafer-labubu 仓库。

如果你觉得这份教程帮到了你。请给作者一个 ⭐️ 鼓励，谢谢大家 🙏！

🍬 感谢

项目灵感及图形创意来源于 LABUBU 简笔画教程 - Thomas。

🍵 写在最终

我是 xiaohe0601 。热爱代码，目前专注于 Web 前端领域。欢迎关注我的微信公众号「小何不会写代码」，我会不定期分享一些开发心得、常用方法还有技术探索等内容。