www/index.html
<!DOCTYPE html/> <head> <title>HTML CANVAS</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="refresh" content="10"/> </head> <body> <canvas id="Canvas" width="800" height="600" style="border:1px solid #000;"> <script type="text/javascript" src="data.js"></script> <script type="text/javascript"> var doc = document.getElementById("Canvas"); var field = doc.getContext("2d"); var len = MyData.length var x = 0 field.font = "16px Times New Roman"; field.fillText("График HTML5 canvas JavaScript",300,20); field.moveTo(0,300); field.fillStyle = "#f00"; for (var i = 0; i < len; i ++) { var y = 300 - MyData[i] field.lineTo(x, y); field.fillRect(x-3,y-3,6,6) x += 10; } field.strokeStyle="#00f"; field.stroke(); </script> </canvas> </body> </html>
www/data.js
var MyData = [ 0,0,0,0,0,0,0,100,10,200,30,-100,40,20,50,-200,250,-100,200,100 ];