黄金曲线图——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;
        }