求助：怎样canvas画布上添加滚动条，显示更多数据

xiaoshitongzhisx 2014-08-24 09:54:05

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas Draw Line</title>
<script src="JS.js"></script>
</head>
<body style="margin-left:30px;">
<canvas id="idline" width="750" height="400" style="border:2px solid gray">
</canvas>
<br /><br />
<script>
var data = [
//1秒
-0.6190,-0.8334,-0.9466,-0.8551,-0.5251,0.0011,0.6524,1.3639,2.0792,2.7427,3.2947,3.6761,3.8377,3.7501,3.4291,2.9592,2.4601,2.0184,1.6492,1.3033,0.9221,0.5100,0.1512,-0.0483,-0.0276,0.1990,0.5446,0.9059,1.2545,1.6292,2.0311,2.3980,2.6575,2.7447,2.6028,2.2121,1.6193,0.9198,0.2106,-0.4273,-0.9151,-1.1827,-1.2147,-1.0825,-0.9168,-0.8568,-1.0143,-1.4372,-2.0777,-2.8111,-3.5123,-4.1316,-4.6949,-5.2426,-5.7766,-6.2459,-6.5503,-6.5646,-6.1892,-5.4112,-4.3316,-3.1312,-2.0115,-1.1375,-0.5606,-0.1927,0.0688,0.2183,0.2042,0.0441,-0.1721,-0.3435,-0.4010,-0.3087,-0.0429,0.3939,0.9362,1.4528,1.7837,1.8084,1.5072,0.9572,0.2803,-0.3974,-0.9749,-1.4068,-1.7048,-1.9018,-2.0171,-2.0588,-2.0558,-2.0896,-2.2662,-2.6181,-3.0447,-3.3685,-3.4240,-3.1093,-2.4128,-1.4209,-0.2899,0.8105,1.7500,2.4712,2.9931,3.3625,3.5948,3.6740,3.6069,3.4587,3.3242,3.2649,3.2687,3.2677,3.2063,3.0603,2.7662,2.2051,1.3132,0.1756,-0.9999,-1.9908,-2.6649,-3.0152,-3.1181,-3.0566,-2.8596,-2.5178,-2.0435,-1.4734,-0.8332,-0.1582,0.4765,0.9881,1.3190,1.4136,1.2014,0.6458,-0.2013,-1.2213,-2.3052,-3.3734,-4.3193,-4.9998,-5.3105,-5.2352,-4.8189,-4.1245,-3.2340,-2.2864,-1.4653,-0.9121,-0.6627,-0.6557,-0.7686,-0.8900,-0.9915,-1.0960,-1.2067,-1.2954,-1.3135,-1.2214,-1.0301,-0.7984,-0.5957,-0.4771,-0.4787,-0.6237,-0.9056,-1.2598,-1.5893,-1.8299,-1.9732,-2.0461,-2.0980,-2.1703,-2.2608,-2.3439,-2.4119,-2.4642,-2.4723,-2.3940,-2.2324,-2.0478,-1.8750,-1.6622,-1.3263,-0.8285,-0.1828,0.5503,1.2548,1.7887,2.0439,1.9801,1.6236,1.0553,0.4000,-0.1932,-0.5813,-0.6596,-0.3942,0.1618,0.8975,1.7104,2.5387,3.3245,3.9756,4.3940,4.5362,4.4230,4.0954,3.5784,2.8873,2.0504,1.1034,0.0652,-1.0508,-2.2102,-3.3833,-4.5563,-5.6686,-6.5901,-7.2027,-7.4588,-7.3521,-6.9231,-6.2989,-5.6455,-5.0852,-4.6967,-4.5353,-4.6070,-4.8459,-5.1423,-5.3877,-5.5023,-5.4429,-5.2000,-4.7912,-4.2466,-3.6022,-2.9157,-2.2681,-1.7296,-1.3410,-1.1248,-1.0812,-1.1897,-1.4364,-1.8283,-2.3855,-3.1156,-3.9606,-4.7856,-5.4579,-5.9189,-6.1687,-6.2442,-6.2360,-6.2593,-6.3715,-6.5424,-6.7124,-6.8527,-6.9719,-7.0901,-7.2284,-7.4130,-7.6717,-8.0232,-8.4622,-8.9265,-9.2982,-9.4935,-9.5460,-9.5610,-9.5897,-9.5745,-9.4122,-9.0467,-8.5070,-7.9008,-7.4003,-7.1721,-7.2477,-7.4787,-7.6422,-7.5882,-7.3016,-6.8577,-6.3439,-5.8195,-5.3240,-4.8949,-4.5576,-4.3114,-4.1346,-4.0084,-3.9434,-3.9753,-4.1301,-4.4009,-4.7499,-5.1317,-5.5392,-6.0149,-6.5852,-7.2058,-7.8055,-8.3290,-8.6912,-8.7643,-8.4799,-7.9198,-7.2981,-6.8604,-6.7525,-6.9490,-7.3034,-7.6400,-7.8111,-7.7521,-7.5152,-7.2278,-7.0243,-6.9950,-7.1479,-7.3998,-7.6074,-7.6205,-7.3477,-6.7998,-6.0764,-5.3193,-4.6484,-4.0831,-3.5564,-3.0425,-2.6265,-2.4350,-2.5350,-2.8846,-3.3447,-3.7303,-3.8557,-3.5653,-2.7791,-1.5292,0.0315,1.6499,3.0441,4.0201,4.5504,4.7503,4.7870,4.7884,4.7773,4.6666,4.3425,3.7783,3.0727,2.3808,1.8163,1.4022,1.0757,0.7421,0.3496,-0.1019,-0.6197,-1.2531,-2.0619,-3.0348,-4.0272,-4.8075,-5.2025,-5.2137,-4.9993,-4.7490,-4.5727,-4.4782,-4.4128,-4.3214,-4.1891,-4.0543,-3.9851,-4.0281,-4.1598,-4.2913,-4.3346,-4.2562,-4.0664,-3.7902,-3.4862,-3.2797,-3.2992,-3.5294,-3.7760,-3.7929,-3.3971,-2.5090,-1.1789,0.4057,1.9564,3.1686,3.8548,4.0464,3.9286,3.6555,3.2573,2.7157,2.0734,1.4526,0.9994,0.8111,0.8625,0.9964,1.0119,0.7698,0.2452,-0.4721,-1.2121,-1.7891,-2.0866,-2.1102,-1.9473,-1.6716,-1.3200,-0.9595,-0.7161,-0.6942,-0.8812,-1.1566,-1.3850,-1.4827,-1.4165,-1.1805,-0.7995,-0.3494,0.0379,0.2074,0.0475,-0.4418,-1.1255,-1.7867,-2.2132,-2.2551,-1.8427,-0.9906,0.2027,1.5692,2.9048,4.0126,4.7474,5.0541,4.9852,4.6913,4.3616,4.1306,4.0357,4.0668,4.2124,4.4250,4.5931,4.5977,4.3743,3.9226,3.2970,2.5888,1.8892,1.2597,0.7323,0.3156,0.0008,-0.2197,-0.3571,-0.4570,-0.6093,-0.9048,-1.3472,-1.8014,-2.0649,-2.0049,-1.6278,-1.0442,-0.3947,0.2160,0.7689,1.3184,1.9015,2.4685,2.9173,3.1645,3.1795,2.9740,2.5732,2.0170,1.3753,0.7280,0.1377,-0.3548
];
var canvas = document.getElementById("idline");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle = "rgb(0,0,200)";
context.fillStyle = "rgb(230,230,255)"
context.translate(0,150); //将坐标原点移动到（0，150）
//context.lineWidth=0.8;
//context.strokeStyle="black";
var n = data.length;
for (var i=0;i <= n;i++)
{
context.lineTo(i*3/10, -data[i]*6.5);
}
//context.closePath();
context.stroke();
//context.fill();

</script>
</body>
</html>

...全文