<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> |
转载于:https://blog.51cto.com/4536592/912899