L2Dwidget二次元看板娘的web用法

本文主要是介绍L2Dwidget二次元看板娘的web用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

打工人的猎奇心：
发现某些blog网站左下方或者右下方出现的二次元卡通人物或萌萌阿猫，除了萌，还可以监听鼠标的行为，产生互动的现象。为探究竟，打工人开始了行动…

一、看板娘 hexo live2d 演示

shizuku 看板娘

看板娘git

https://github.com/raoenhui/live2d-example

在这里插入图片描述

看板娘文档

https://juejin.im/post/6844904032423641096

二、代码实现

Talk is cheap. Show me the code.

2.1 方式一：cdn

只需要在【页首html代码】中引入L2Dwidget.js即可

<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<!--<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>--><script>L2Dwidget.init({"model": {"jsonPath": "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json","scale": 1},"display": {"position": "right","width": 150,"height": 300,"hOffset": 0,"vOffset": -20},"mobile": {"show": true,"scale": 0.5},"react": {"opacityDefault": 0.8,"opacityOnHover": 1},"dialog": {"enable": true,"script": {'tap body': '哎呀！别碰我！','tap face': '人家是在认真写博客哦--前端妹子',}}});
</script>

这里展示部分图：
在这里插入图片描述

2.2 方式二：源码实现

npm install --save hexo-helper-live2d

# 博客文档
https://huaji8.top/post/live2d-plugin-2.0/# git地址
https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

在这里插入图片描述

2.3 demo

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Live2d Test Env</title><meta http-equiv="X-UA-Compatible" content="IE=edge"></head><body><p>试试摸摸头和这颗星星会有不同的对话哦</p><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="190" height="180" class="star"><polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:yellow;stroke:yellow;stroke-width:1;"/></svg><script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script><script type="text/javascript">L2Dwidget.on('*', (name) => {console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')}).init({dialog: {// 开启对话框enable: true,script: {// 每空闲 10 秒钟，显示一条一言'every idle 10s': '$hitokoto$',// 当触摸到星星图案'hover .star': '星星在天上而你在我心里 (*/ω＼*)',// 当触摸到角色身体'tap body': '哎呀！别碰我！',// 当触摸到角色头部'tap face': '人家已经不是小孩子了！'}}});</script></body>
</html>