canvas同一 画布内输出多种内容格式， 不同文字，不的颜色 不同的字体 自动算出 每种字体内容的宽度，

canvas同一 画布内输出多种内容格式， 不同文字，不的颜色 不同的字体 自动算出 每种字体内容的宽度，

<canvas id="canvas" width="500" height="150" style="border: 1px dashed gray;display: block"></canvas>

 window.onload = function() {
    	var list = [{
    			name: '第一种字体和颜色',
    			colors: '#f00000',
    			font: '24px ',
    			width: ''
    		},
    		{
    			name: '第二种字体和颜色',
    			colors: '#000000',
    			font: '16px  ',
    			width: ''
    		},
    		{
    			name: '第三种字体和颜色',
    			colors: '#f0f',
    			font: '14px  ',
    			width: ''
    		}
    	]
    	pieChart(list);
    };

    function pieChart(list) {
    	var c = document.getElementById("canvas");
    	var cxt = c.getContext('2d');
    	var lab = list;
    	var no0 = ''
    	var no1 = ''
		var no2 = ''  
    	for (var i = 0; i < lab.length; i++) {
    		if (i == 0) {
				cxt.font = lab[0].font + 'Microsoft YaHe';
				cxt.fillStyle = lab[0].colors; 
    			var txtwidth = 0;
    			var w0 = cxt.measureText(lab[0].name).width+10;
    			lab[i].width = txtwidth;		
    		} else if (i == 1) {
				cxt.font = lab[1].font + 'Microsoft YaHe';
				cxt.fillStyle = lab[1].colors; //绘制颜色
    			var txtwidth =w0;
    			var w1 = cxt.measureText(lab[1].name).width+10;
    			lab[i].width = txtwidth;
    		} else if (i == 2) {
				cxt.font = lab[2].font + 'Microsoft YaHe';
				cxt.fillStyle = lab[2].colors; //绘制颜色
    			var txtwidth = w1+w0;
    			lab[i].width = txtwidth;

    		}
    		cxt.fillText(lab[i].name, lab[i].width, 50);

    	}
    }