使用html5中canvas实现一个在线的微信零钱余额生成器

最近在网上看到一些小站有微信零钱金额生成和支付宝资产生成的功能,感觉娱乐性挺强的,而且说实话做得好,是完全能够以假乱真的。所以也在自己的网站butterpig上实现了一下,先放上该功能的地址微信零钱生成工具,炫富装B神器。实际效果如图:

在线微信余额生成工具

在网页预览的时候,显示的是一个img标签和一个浮在其上的文本框。该文本框和下方的资产金额的input是数据绑定的。因此可以在微信零钱余额位置即时显示出我们输入的数值。

然而真正实现,是通过一个隐藏的canvas,将原始图片渲染到canvas中,然后再在指定的位置,用画笔画出数值文字。即可输入带指定数值的高清原图了。只使用到了很简单的canvas知识而已。功能体验地址是:微信零钱生成工具,炫富装B神器

你可能感兴趣的:(使用html5中canvas实现一个在线的微信零钱余额生成器)