博客园—2D小人物

人物样式大全

https://huaji8.top/post/live2d-plugin-2.0/javascript

做者github

https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.mdcss

怎么使用?

首先咱们的目的是想要把这个动态的小人添加到咱们的博客园，那首先得注册一个博客园，并把js样式功能解锁java

接下来就是简单的步骤,进入博客园的设置功能react

一.页面订制css代码git

canvas#live2dcanvas {
border: 0 !important;
right: 0;
}

二.页脚Html代码github

<script type="text/javascript">
L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width":75,
            "height": 150,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 1
        }
    }
);
</script>

怎么更换想要的角色？

在人物样式大全能够看到，人物的名字。而后在修改js代码中的jsonpathhttps://unpkg.com/live2d-widget-model-人物名/assets/人物名.model.json，能够直接在浏览器发送这个请求，看有没有相关数据返回，有的话，这个样式是存在的，有些可能找不到了，要本身去找json

相关属性设置

live2d:

  model:

    scale: 1	#模型与canvas的缩放

    hHeadPos: 0.5	#模型头部横坐标

    vHeadPos: 0.618	#模型头部纵坐标

  display:

    superSample: 2	#超采样等级

    width: 150	#画布的宽度，显示模型画布的长度

    height: 300	#画布高度显示模型画布的高度

    position: right	#显示位置：左或右

    hOffset: 0	#水平偏移

    vOffset: -20	#垂直偏移

  mobile:

    show: true	#是否在移动设备上显示

    scale: 0.5	#移动设备上的缩放

  react:

    opacityDefault: 0.7	#默认透明度

    opacityOnHover: 0.2	#鼠标移上透明度

这是这样，两步就搞定canvas