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/