领一只动态卡哇伊的小猫咪到你的网站吧 live2d入门

线上吸猫

最终效果演示:https://tczmh.gitee.io/live2dmodel/ (加载模型可能需要稍等5~10秒)
最终源码地址:https://gitee.com/tczmh/live2DModel
另外在我的博客里也领了一只小黑猫:http://zzzmh.cn/

动图演示

小黑猫

事前提要

我也是在别人博客看到以后，才开始研究的，本教程所有代码都基于github大神的demo，并非本人原创。参考的原作者github：https://github.com/QiShaoXuan/live2DModel

live2D是通过canvas实时演算，把一个图片格式模型，变成一个动态的人物。
官网：https://www.live2d.com/

本篇博客只简单说下基本用法，以及如何放到快速你自己的网站。

代码实现

引入js依赖

申明配置文件

var config = {
    model: {
        jsonPath: 'tororo/assets/tororo.model.json' // 加载模型的json路径
    },
    display: {
        superSample: 1, // 超采样等级
        width: 350, // canvas的宽度
        height: 400, // canvas的高度
        position: 'right', // 显示位置：左或右
        hOffset: 0, // canvas水平偏移
        vOffset: 0, // canvas垂直偏移
    },
    mobile: {
        show: true, // 是否在移动设备上显示
        scale: 1, // 移动设备上的缩放
        motion: true, // 移动设备是否开启重力感应
    },
    react: {
        opacityDefault: 1, // 默认透明度
        opacityOnHover: 1 // 鼠标移上透明度
    }
}

初始化模型

L2Dwidget.init(config)

大功告成！

---

END

另外我最近还在我的壁纸站放了一个萌萌哒的血小板小姐姐，欢迎查看
地址:https://bz.zzzmh.cn/#about
后续还会更新这个用法的博客文章