<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title> </title>
<style type="text/css">
</style>
<script type="text/javascript">
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 = 250, height = 100;
var maxV = arr.max();
//计算y轴增量
var yStep = height / maxV;
console.log(maxV);
var domCan = document.getElementById("canDom");
var g = domCan.getContext("2d");
//g.rotate(180 * Math.PI / 180);//旋转90度
//g.translate(50, 0);
//g.scale(1,-1);
g.beginPath();
g.lineWidth = 2;
g.strokeStyle = "#c30000";
//g.moveTo(0, 0);//开始画图的位置
var x_space = width / (arr.length - 1);//水平点的间隙像素
//g.lineTo(15, 60); x,y,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);
g.lineTo(xLen, yPont);
}
//g.lineTo(15, 60);
//g.lineTo(20, 30);
//g.lineTo(30, 40);
//g.lineTo(40, 50);
g.stroke();
g.closePath();
}
drawLine.minCurve = draw;
//window.drawMinLine = draw;
}();
window.onload = function () {
var arr = [10, 50, 30, 70, 80, 40, 90, 110, 80, 60, 69, 80, 80, 10, 50, 30, 70, 80, 40, 97, 80, 70, 60, 50, 80];
//var arr = [30, 80,50,70];
//drawMinLine(arr);
drawLine.minCurve(arr);
}
</script>
</head>
<body>
<canvas id="canDom" width="250" height="100" style="border:1px solid #ccc;"></canvas>
</body>
</html>效果图：
