uniapp canvas绘制文字头像

效果如下图： 

子组件代码：

父组件相关代码如下：

					
						
					
					{{item.name}}
				

list数据结构如下：

menuList:[
					{
						id:0,
						name:'湘菜',
						bgColor:'#FF5B5B'
					},
					{
						id:1,
						name:'杭帮菜',
						bgColor:'#31ABFF'
					},
					{
						id:2,
						name:'川菜',
						bgColor:'#FF356B'
					},
					{
						id:3,
						name:'新疆菜',
						bgColor:'#0DCA0B'
					},
					{
						id:4,
						name:'东北菜',
						bgColor:'#42D532'
					},
					{
						id:5,
						name:'豫菜',
						bgColor:'#18A2FF'
					},
					{
						id:6,
						name:'泰国菜',
						bgColor:'#2BE6AC'
					},
					{
						id:7,
						name:'北京菜',
						bgColor:'#FF812F'
					},
					{
						id:8,
						name:'新加坡菜',
						bgColor:'#FF5E88'
					},
					{
						id:9,
						name:'陕西菜',
						bgColor:'#FFBA3A'
					}
				],

背景图我这是是通过父标签设置border-radius、overflow属性来超出隐藏将一个矩形变成圆形的

注意：

问题1：遍历绘制全绘制成最后一个了

解决方案：因为要遍历绘制canvas，而绘制canvas又是根据canvas-id来绘制的，所以在子组件内我们不能把canvas-id写死，而是通过父组件传参的形式生成不同canvas-id的canvas节点，否则，图中的效果就会变成全是“陕”。