HTML5 动态统计表
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态统计图表</title>
</head>
<body>
<div style="text-align:center;">
<canvas id="testCanvas" width="1024" height="300" style="border:1px solid #1111AA;"></canvas>
<div>动态统计图表</div>
</div>
<script type="text/javascript">
var canvas = document.getElementById('testCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineJoin = 'bevel';
ctx.miterLimit = 5;
function changeFun() {
ctx.clearRect(0, 0, 1024, 300);
ctx.beginPath();
var arr = [];
for(var i=0; i< 30; i++ )
{
var random = Math.random();
random = parseInt(random * 100 % 100 + 1);
arr.push(random);
}
var x = 0;
for(var i=0; i< 30; i++ )
{
var y = arr[i]+50;
ctx.lineTo(x, y);
ctx.fillText(x+','+100, x-3, y);
ctx.moveTo(x, y);
x = x + 35;
}
ctx.stroke();
};
setInterval(changeFun,1000);
</script>
</body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态统计图表</title>
</head>
<body>
<div style="text-align:center;">
<canvas id="testCanvas" width="1024" height="300" style="border:1px solid #1111AA;"></canvas>
<div>动态统计图表</div>
</div>
<script type="text/javascript">
var canvas = document.getElementById('testCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineJoin = 'bevel';
ctx.miterLimit = 5;
function changeFun() {
ctx.clearRect(0, 0, 1024, 300);
ctx.beginPath();
var arr = [];
for(var i=0; i< 30; i++ )
{
var random = Math.random();
random = parseInt(random * 100 % 100 + 1);
arr.push(random);
}
var x = 0;
for(var i=0; i< 30; i++ )
{
var y = arr[i]+50;
ctx.lineTo(x, y);
ctx.fillText(x+','+100, x-3, y);
ctx.moveTo(x, y);
x = x + 35;
}
ctx.stroke();
};
setInterval(changeFun,1000);
</script>
</body>
</html>
------------------
------------------
