html5画布画出折线图,canvas 画出动态折线图

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

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

矩形.png

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

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

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

lineCanvas.png

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

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

mycanvas

line canvas

window.onload = function () {