canvas 画出动态折线图

canvas 是 html5 支持的一个标签，用于图形的绘制。canvas 标签仅仅提供了图形的容器，必须通过 js 脚本来绘制。

比如，绘制一个简单的矩形：

矩形.png

这里就不做入门普及了，可直接搜索相关 API 查看。

比如，我要做一个折线的效果：

lineCanvas.png

首先，获取到画布的上下文，getContext("2d")；

然后，根据要显示的数值，调用上下文的 lineTo() 方法画出一条条的线，这些线连接起来就形成了趋势线的效果，

    

        
line canvas
        
    

    
    

下面来个组合练习，我要实现动态的效果，就是折线是动态生成的；这个也不难，就是设置一个定时器，一段一段触发就行了；那么，咱们再增加一点难度，我要同时展示 4 个趋势折线，4 个折线都与时间关联，也就是同一个时间点显示 4 组不同的数据，同时，还要支持时间段的切换，比如 1 分钟和 10 分钟不同的时间段；像下面这样：

canvas.gif

你可以尝试自己实现一下，这里提供一个前端的实现参考，前端代码下载。