HTML5 动态统计表

web8 · 发表于 2013-1-4 03:05:11

<html>
<div class="cnblogs_code"><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+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>

		自动登录	找回密码
密码			立即注册