|
<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> </html> |
