黄金曲线图——canvas

今天项目中，为了体现html5的最新特性，要求画一个时实的黄金走势的曲线图，以下是具体的模拟代码。

<div id="div1"><canvas id="cs1" width="600" height="420" style="background-color:white; border:1px solid green;">你的浏览器不支持canvas</canvas></div> <script type="text/javascript"> var cs = document.getElementById('cs1'); var cxt = cs.getContext('2d'); var map = { w: 450, h: 320 }; //坐标图的宽和高 var basePoint = { x: 80, y: 50 }; //原点位置 var intervalData = { l: ['1317.8900', '1319.9000', '1319.9100', '1323.9200', '1325.9300', '1327.9400', '1329.9500', '1331.9600', '1333.9700'], r: ['-0.61%', '-0.45%', '-0.30%', '-0.15%', '0.00%', '+0.15%', '+0.30%', '+0.45%', '+0.61%'] }; //左右坐标轴数据 var time = ['08:00', '14:00', '20:00', '02:00']; var legend = [{ color: '#E2007F', desc: '价格' }, { color: '#2358A6', desc: '均价' }]; var timer = null; cxt.lineWidth = 1; cxt.font = '12px 宋体'; cxt.translate(basePoint.x, basePoint.y); //设置原点 //画坐标 function drawMap() { cxt.clearRect(0, 0, cs.width, cs.height); cxt.strokeStyle = '#000'; cxt.lineWidth = 1; cxt.beginPath(); cxt.strokeRect(0, 0, map.w, map.h); cxt.closePath(); //画横线 for (var i = 0; i < 7; i++) { cxt.strokeStyle = i == 3 ? '#000' : '#ccc'; cxt.beginPath(); cxt.moveTo(0, 40 * (i + 1)); cxt.lineTo(cs.width-150, 40 * (i + 1)); cxt.stroke(); cxt.closePath(); } //画竖线 for (var i = 0; i < 3; i++) { cxt.beginPath(); cxt.moveTo(112.5*(i+1), 0); cxt.lineTo(112.5 * (i + 1), 320); cxt.stroke(); cxt.closePath(); } //画时间 for (var i = 0, l = time.length; i < l; i++) { cxt.fillStyle = '#999'; cxt.fillText(time[i], 2+112*i, 335); } //画左侧坐标轴文字部分 for (var i = 0, l = intervalData.l.length; i < l; i++) { if (i < 4) { cxt.fillStyle = '#3BBD3B'; }else if (i == 4) { cxt.fillStyle = '#000'; } else { cxt.fillStyle = '#FF4343'; } cxt.fillText(intervalData.l[i], -60, 325-40*i); } //画右侧坐标轴文字部分 for (var i = 0, l = intervalData.r.length; i < l; i++) { if (i < 4) { cxt.fillStyle = '#3BBD3B'; } else if (i == 4) { cxt.fillStyle = '#000'; } else { cxt.fillStyle = '#FF4343'; } cxt.fillText(intervalData.r[i], 452, 325-40*i); } //画图例 for (var i = 0, l = legend.length; i < l; i++) { cxt.beginPath(); cxt.strokeStyle = '#000'; cxt.strokeRect(400-50*i, -15, 10, 10); cxt.fillStyle = legend[i].color; cxt.fillRect(400-50*i, -15, 10, 10); cxt.closePath(); cxt.fillStyle = '#000'; cxt.fillText(legend[i].desc, 365+50*i, -6); } } //画曲线 var pos = { x: 0, y: 0 }; function drawCurve() { cxt.strokeStyle = '#2358A6'; cxt.beginPath(); cxt.moveTo(pos.x, pos.y); pos.x+=3; if (pos.x > map.w) { pos.x = 0; cxt.clearRect(0, 0, cs.width, cs.height); drawMap(); } pos.y = map.h * Math.random(); cxt.lineTo(pos.x, pos.y); cxt.stroke(); cxt.closePath(); } drawMap(); timer = setInterval(drawCurve, 300); </script> 　　DIV1的样式: #div1{ width:600px; height:420px; margin:10px auto; }