Vue最简单的实现网页Live2D看板娘

Live2D看板娘

• 前言
• 二、使用步骤
• 1.引入
• 2.设置样式
• 结尾（后续更新更强的配置看板娘~）

---

前言

最近想给自己的网页添点新花样，然后就想到了别人的网站都有一些看板娘的玩意儿，看着很舒服，鉴于自己也没玩过，就鼓捣了一会儿。发现实现的模型还挺多。我这里呢，就简化一下，弄一个最简单在vue中的教程。

二、使用步骤

1.引入

在index.html页面映入js：

 <!-- 看板娘 -->
  <script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
  <script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
  <script type="text/javascript">
      L2Dwidget.init({
        "display": {
          "superSample": 2,
          "width": 200,
          "height": 400,
          "position": "left",//设置看板娘的位置
          "hOffset": 0,
          "vOffset": 0
            }
       });
  </script>

2.设置样式

有能力的也可以自行修改css样式：

 /* 看板娘样式设置 */
      #live2dcanvas {
        border: 0 !important;
      }

这样就可以看到一个呆萌的看板娘，如果需要放到自己的博客里看的话只需要在设置里的页面定制CSS代码和JS上加上下面的代码，如果不支持JS代码申请一下就行了。

看一下我的效果：

---

结尾（后续更新更强的配置看板娘~）

以上就是今天要讲的内容，本文仅仅简单的使用了看板娘，更多骚操作请自行百度，就到这里了，告辞~