本文介绍如何使用canvas技术动态生成收款码，并将提示信息、支付方式、店铺名称、二维码、公司logo等元素拼接成一张图片。通过示例代码展示了vue项目的实现过程，包括绘制不同部分的背景色、文字、图片等操作。
最近项目叫做一个收款码的生成，如下图，因为二维码是动态生成的，所以整张图片需要自己拼接，然后搞成图片下载下来，
所以就尝试用canvas做了，首部是提示信息，然后是扫码支持的方式，店铺名称，二维码，二维码上面还有个收钱的小标志，最好就是公司的logo了。哈哈，上代码了
代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
</style>
<body>
<div id="app">
<button @click="bulidCode">生成二维码</button><br>
<canvas width="750" height="1200" id="canvas"></canvas>
</div>
</body>
<script>
最低0.47元/天 解锁文章
扫一扫
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
