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/