html转换成canvas文字空白,html2canvas.js——HTML转Canvas工具

我们经常会遇上动态生成海报的需求，而在Web前端中，生成图片非Canvas莫属。但是在实际工作当中，为了追求效率，我们会不可避免地去使用一些JS插件，而html2canvas.js就是一款优秀的插件，它可以轻松地帮你将HTML代码转换成Canvas，进而生成可保存分享的图片。

具体如何使用这款插件呢？接下来请让我用一个简单的示例来为大家讲解。

现在假设要生成如下图片，而所有图片和文字都是动态获取的。

按照需求，我们无法使用PS去合成元素，只能通过代码动态生成，这时就可以用到html2canvas.js了。

1. 布局

学习Web前端
关注前端微站

#qianduanwz{ width: 900px; height: 383px; text-align: center; background:

url("./images/bg.jpg") no-repeat center;}

#qianduanwz img{ width: 200px; margin-top: 60px;}

#qianduanwz p{ margin: 0; padding-top: 10px; font-s