php同段不同字体颜色,canvas 如何给文本设置不同字体颜色

已解决，在想改字体上面分别写.fillStyle就可以了

02Canvas案例-绘制表格

你的浏览器不支持canvas，请升级浏览器

(function(){

var data = [

{nickName: "咸蛋的蛋", corpusBanker: 0, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 3138},

{nickName: "空有我葬", corpusBanker: 42200, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "白字清欢", corpusBanker: 17700, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "野风吹", corpusBanker: 0, corpusPlayer: 44500, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "在一起不分开", corpusBanker: 0, corpusPlayer: 5400, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "迎风偷吻你", corpusBanker: 0, corpusPlayer: 39600, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "让我认识你", corpusBanker: 7700, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "荒废诗书", corpusBanker: 0, corpusPlayer: 37838, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "还是当年颜色", corpusBanker: 0, corpusPlayer: 48688, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "百般流传", corpusBanker: 0, corpusPlayer: 16400, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "对眼错过", corpusBanker: 0, corpusPlayer: 22388, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "别笑了别闹了", corpusBanker: 46400, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP:0},

{nickName: "毫不挽留", corpusBanker: 0, corpusPlayer: 14200, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "风阁暖人", corpusBanker: 0, corpusPlayer: 24088, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "让你撒欢", corpusBanker: 0, corpusPlayer: 38600, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "寻梦像扑火", corpusBanker: 3300, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "我只借一程", corpusBanker: 0, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 1938},

{nickName: "花木予诗", corpusBanker: 0, corpusPlayer: 0, corpusTie: 1200, corpusBP: 0, corpusPP: 0},

{nickName: "流出", corpusBanker: 0, corpusPlayer: 9700, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "情感败北", corpusBanker: 7500, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "假性假友", corpusBanker: 33400, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0},

{nickName: "三观", corpusBanker: 44500, corpusPlayer: 0, corpusTie: 0, corpusBP: 0, corpusPP: 0}

];

var summaryInfo = [{betNum: 32,corpusAmount: 587466,corpusBP: 8600,corpusBanker: 455366,corpusPP: 4200,corpusPlayer: 114900,corpusTie: 4400,gameNo: 15,resultAmount: 0,shoeNo: 14,tableID: 1}]

var canvas=document.querySelector('#cavsElem');

var ctx=canvas.getContext('2d');

canvas.width=455*2;

canvas.height=data.length*40+80;

canvas.style.border="1px solid #ccc";

var rectH=20;

var rectW=65;

ctx.scale(2,2)

ctx.lineWidth = 1;

ctx.strokeStyle = "#ccc";

ctx.textAlign = "center";

ctx.fillStyle = "#000000";

ctx.fillText('序号',32,15);

ctx.fillText('用户',97,15);

ctx.fillStyle = "#ff0000";

ctx.fillText('a',162,15);

ctx.fillStyle = "#006fff";

ctx.fillText('b',227,15);

ctx.fillStyle = "#07c160";

ctx.fillText('c',292,15);

ctx.fillStyle = "#ff0000";

ctx.fillText('d',357,15);

ctx.fillStyle = "#006fff";

ctx.fillText('e',422,15);

for(var i= 0;i

ctx.fillStyle = "#000000";

ctx.fillText(i+1,32,rectH*i+35);

ctx.fillText(data[i].nickName,97,rectH*i+35);

ctx.fillStyle = "#ff0000";

ctx.fillText(data[i].corpusBanker,162,rectH*i+35);

ctx.fillStyle = "#006fff";

ctx.fillText(data[i].corpusPlayer,227,rectH*i+35);

ctx.fillStyle = "#07c160";

ctx.fillText(data[i].corpusTie,292,rectH*i+35);

ctx.fillStyle = "#ff0000";

ctx.fillText(data[i].corpusBP,357,rectH*i+35);

ctx.fillStyle = "#006fff";

ctx.fillText(data[i].corpusPP,422,rectH*i+35);

}

ctx.fillStyle = "#000000";

ctx.fillText('合计',32,data.length*20+35);

ctx.fillText('',97,data.length*20+35);

ctx.fillStyle = "#ff0000";

ctx.fillText(summaryInfo[0].corpusBanker,162,data.length*20+35);

ctx.fillStyle = "#006fff";

ctx.fillText(summaryInfo[0].corpusPlayer,227,data.length*20+35);

ctx.fillStyle = "#07c160";

ctx.fillText(summaryInfo[0].corpusTie,292,data.length*20+35);

ctx.fillStyle = "#ff0000";

ctx.fillText(summaryInfo[0].corpusBP,357,data.length*20+35);

ctx.fillStyle = "#006fff";

ctx.fillText(summaryInfo[0].corpusPP,422,data.length*20+35);

for(var y=0;y<7;y++){

ctx.moveTo(rectW*y,0);

ctx.lineTo(rectW*y,canvas.height);

ctx.stroke();

}

for(var x= 0;x

ctx.moveTo(0,rectH*x);

ctx.lineTo(canvas.width,rectH*x);

ctx.stroke();

}

}())