canvas 是 html5 支持的一个标签，用于图形的绘制。canvas 标签仅仅提供了图形的容器，必须通过 js 脚本来绘制。
比如，绘制一个简单的矩形：
矩形.png
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
这里就不做入门普及了，可直接搜索相关 API 查看。
比如，我要做一个折线的效果：
lineCanvas.png
首先，获取到画布的上下文，getContext("2d")；
然后，根据要显示的数值，调用上下文的 lineTo() 方法画出一条条的线，这些线连接起来就形成了趋势线的效果，
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>mycanvas</title>
</head>
<body>
<div>
<h2>line canvas</h2>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
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;
}();
</script>
</body>
</html>
下面来个组合练习，我要实现动态的效果，就是折线是动态生成的；这个也不难，就是设置一个定时器，一段一段触发就行了；那么，咱们再增加一点难度，我要同时展示 4 个趋势折线，4 个折线都与时间关联，也就是同一个时间点显示 4 组不同的数据，同时，还要支持时间段的切换，比如 1 分钟和 10 分钟不同的时间段；像下面这样：
canvas.gif
你可以尝试自己实现一下，这里提供一个前端的实现参考，前端代码下载。
网友评论