html5小人物,博客园—2D小人物

博客园—2D小人物

人物样式大全

作者github

怎么使用?

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

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

一.页面订制css代码

canvas#live2dcanvas {

border: 0 !important;

right: 0;

}

二.页脚Html代码

L2Dwidget.init({

"model": {

jsonPath: "https://unpkg.com/live2d-widget-model-koharu/assets/koharu.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

}

}

);

怎么更换想要的角色？

在人物样式大全可以看到，人物的名字。然后在修改js代码中的jsonpathhttps://unpkg.com/live2d-widget-model-人物名/assets/人物名.model.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 #鼠标移上透明度

这是这样，两步就搞定