canvas绘制表格数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绘制表格</title>
</head>
<body>
<div id="container"><canvas id="cavsElem">你的浏览器不支持canvas，请升级浏览器</canvas>
</div>
<script>(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('庄',162,15);ctx.fillStyle = "#006fff"; ctx.fillText('闲',227,15);ctx.fillStyle = "#07c160";ctx.fillText('和',292,15);ctx.fillStyle = "#ff0000";ctx.fillText('庄对',357,15);ctx.fillStyle = "#006fff";ctx.fillText('闲对',422,15);for(var i= 0;i<data.length;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 i= 0;i<data.length+2;i++){ctx.moveTo(rectW*i,0);ctx.lineTo(rectW*i,canvas.height);ctx.moveTo(0,rectH*i);ctx.lineTo(canvas.width,rectH*i);ctx.stroke();}}())
</script>
</body>
</html>

转载于:https://www.cnblogs.com/wrongcode/p/11187228.html

canvas绘制表格数据相关推荐

canvas——绘制表格
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
canvas绘制表格
课程目标: 1.绘制表格需要什么核心方法? 2.步骤是怎么样的? 3.源代码 1.绘制表格需要什么核心方法? Math.floor beginPath moveTo lineTo strokeStyl ...
微信小程序canvas绘制表格
效果图 html <button catchtap="draw">打印</button <button bindtap="saveImg" ...
【Canvas】绘制表格+圆角矩形色块
效果: 像这种简单的表格完全可以实现,这里只当入门canvas示例观看即可代码: <!DOCTYPE html> <html> <head> <meta c ...
df添加一行 python_Python为输出的数据绘制表格
在Python开发环境中,输出数据时没有表格.没有对齐,当数据较多的情况下看起来非常的凌乱,估计很多人像我一样为这个事情而烦恼. 左图是我在PyCharm开发环境下输出的数据.下面我们通过Python ...
Highcharts使用表格数据绘制图表
Highcharts使用表格数据绘制图表在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...
Python读取excel表格数据并绘制成柱状图 | 数据排序、柱状图颜色、标签乱码等问题通通能够解决！
hello大家好, 我是你们的可爱丸, 我们又见面啦! python的功能十分强大, 它不仅可以用来做爬虫, 还可以用来做数据分析哦! 那么今天我就带着大家用python 分析表格数据,并绘制成柱状 ...
R语言读取Excel表格数据并绘制多系列柱状图、条形图
本文介绍基于R语言中的readxl包与ggplot2包,读取Excel表格文件数据,并绘制具有多个系列的柱状图.条形图的方法. 首先,我们配置一下所需用到的R语言readxl包与ggplot2 ...
c# winform 绘制表格填充数据并且打印预览表格
调用打印类并执行预览 using System; using System.Collections.Generic; using System.ComponentModel; using System ...

canvas绘制表格数据

canvas绘制表格数据相关推荐

最新文章

热门文章