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代碼申請一下就行了。

看一下我的效果：

---

結尾（后續更新更強的配置看板娘~）

以上就是今天要講的內容，本文僅僅簡單的使用了看板娘，更多騷操作請自行百度，就到這里了，告辭~