在自己博客园添加live2d可爱卡通人物

在博客园刷文章的时候，偶然看到一个博客页面上有个特别可爱的卡通萌妹子，而且妹子的目光可以随着鼠标的移动而移动，断定是canvas，好奇心（绝不是看妹子可爱）果断F12查看代码，页面代码最下方有个id为live2d-widget的div盒子，就是它了。

想看代码或在其他地方使用点这里

博客园使用

直接将代码复制到页脚即可

    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
    <script type="text/javascript">
        L2Dwidget.init();
    </script>

新注册的用户保存可能没有开通js权限，保存代码没有效果，设置里开通权限即可

更多配置

    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json", // 卡通模型
            "scale": 1
        },
        "display": {
            "position": "right", // 定位位置（"left"/"right"/"top"/"bottom"）
            "width": 150, // 宽度
            "height": 300, // 高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": false,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1, // 透明度
            "opacityOnHover": 0.2
        }
    });

模型列表

更换模型修改jsonPath即可，https://unpkg.com/模型包@1.0.5/assets/卡通模型名.model.json

模型包：live2d-widget-model-卡通模型名

• live2d-widget-model-chitose
• live2d-widget-model-epsilon2_1
• live2d-widget-model-gf
• live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
• live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
• live2d-widget-model-haruto
• live2d-widget-model-hibiki
• live2d-widget-model-hijiki
• live2d-widget-model-izumi
• live2d-widget-model-koharu
• live2d-widget-model-miku
• live2d-widget-model-ni-j
• live2d-widget-model-nico
• live2d-widget-model-nietzsche
• live2d-widget-model-nipsilon
• live2d-widget-model-nito
• live2d-widget-model-shizuku
• live2d-widget-model-tororo
• live2d-widget-model-tsumiki
• live2d-widget-model-unitychan
• live2d-widget-model-wanko
• live2d-widget-model-z16