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

window.onload = function () {

var arr = [40, 50, 30, 70, 80, 40, 90, 60, 80, 60, 69, 80, 80, 40, 50, 30, 70, 80, 40, 77, 80, 70, 60, 50, 80];

drawLine.minCurve(arr);

}

var drawLine = {};

!function () {

//求数组最大值

Array.prototype.max = function () {

var max = this[0];

var len = this.length;

for (var i = 1; i < len; i++) {

if (this[i] > max) {

max = this[i];

}

}

return max;

}

function draw(arr) {

var width = 300, height = 200;

var maxV = arr.max();

//计算y轴增量

var yStep = height / maxV;

console.log(maxV);

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

var context = domCan.getContext("2d");

context.beginPath();

context.lineWidth = 2;

context.strokeStyle = "#395B73";

//context.moveTo(0, 0);//开始画图的位置

var x_space = width / (arr.length - 1);//水平点的间隙像素

//context.lineTo(15, 60); x表示水平向右延伸，y表示垂直高度位置，从画板最左上角(0,0)开始计算坐标

var xLen = 0;

for (var i = 0; i < arr.length; i++) {

var yValue = arr[i];//纵坐标值

xLen += x_space;

var yPont = height - yValue * yStep;

if (i == 0) {

xLen = 0;

}

var m = xLen + "," + yPont;

console.log(m);

context.lineTo(xLen, yPont);

}

context.stroke();

context.closePath();

}

drawLine.minCurve = draw;

}();

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

canvas.gif

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