Div轉為Canvas簡直不要太好玩~~~

html2canvas庫

---

今天發現了一個神奇的玩意，簡直不要太好玩~~

用canvas做動畫是很難，但是div能比canvas簡單不少，只是因為canvas中不能操作Dom元素

這款神器，可以直接將Div+CSS轉換為canvas

目測可以用在將div元素通過轉變為canvas元素來實現圖片的保存

---

純Div+CSS：

<div class="box"></div>

.box {
      width: 100px;
      height: 100px;
      background: red;
      border: 1px solid yellow;
}

效果如圖：

---

轉為canvas代碼如下：

<div class="box"></div>

.box {
      width: 100px;
      height: 100px;
      background: red;
      border: 1px solid yellow;
}

//引入Jquery
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
//引入html2canvas
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
//選中.box類將該容器轉為canvas
html2canvas(document.querySelector('.box')).then(function (canvas) {
    $('.box').remove()    //移除頁面上的該元素
    document.body.appendChild(canvas);    //像頁面中添加轉為canvas之后的元素
})

效果如圖：

---

提供html2canvas庫的地址：https://www.bootcdn.cn/html2canvas/