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/