HTML5 Canvas——折线图
<script type="text/javascript"> /*1.绘制网格 网格大小 10px 网格的颜色 #ddd */ /*2.绘制坐标 轴的离边距离 20px 箭头的尺寸 10px */ /*3.绘制点 点尺寸 6px */ /*4.连接点 */ /*5.准备数据*/ var data = [ { x: 50, y: 90 }, { x: 150, y: 150 }, { x: 250, y: 250 }, { x: 350, y: 130 }, { x: 450, y: 80 } ] /*使用面向对象的方式实现*/ var LineChart = function (ctx) { //绘制工具 this.ctx = ctx || document.querySelector('canvas').getContext('2d'); //网格大小 this.gridSize = 10; //网格线的颜色 this.gridColor = '#fff'; //轴的离边距离 this.space = 20; //箭头的尺寸 this.arrowSize = 10; //点尺寸 this.pointSize = 6; //画布的高度 this.canvasHeight = this.ctx.canvas.height; //画布的宽度 this.canvasWidth = this.ctx.canvas.width; //入口函数 //this.init(); } //入口函数 LineChart.prototype.init = function (data) { this.drawGrid(); this.drawXY(); this.drawPointList(data); this.joinPoint(); }; //绘制网格 LineChart.prototype.drawGrid = function () { /*业务*/ /*1. 绘制X轴方向的线*/ var xCount = Math.floor(this.canvasHeight / this.gridSize); for (var i = 0; i < xCount; i++) { this.ctx.beginPath(); this.ctx.moveTo(0, i * this.gridSize - 0.5); this.ctx.lineTo(this.canvasWidth, i * this.gridSize - 0.5); this.ctx.strokeStyle = this.gridColor; this.ctx.stroke(); } /*2. 绘制Y轴方向的线*/ var yCount = Math.floor(this.canvasWidth / this.gridSize); for (var i = 0; i < yCount; i++) { this.ctx.beginPath(); this.ctx.moveTo(i * this.gridSize - 0.5, 0); this.ctx.lineTo(i * this.gridSize - 0.5, this.canvasHeight); this.ctx.strokeStyle = this.gridColor; this.ctx.stroke(); } } //绘制原点和坐标轴 LineChart.prototype.drawXY = function () { /*1.坐标原点*/ this.x0 = this.space; this.y0 = this.canvasHeight - this.space; /*2.绘制X轴*/ this.ctx.beginPath(); this.ctx.moveTo(this.x0, this.y0); this.ctx.lineTo(this.canvasWidth - this.space, this.y0); this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2); this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2); this.ctx.lineTo(this.canvasWidth - this.space, this.y0); this.ctx.strokeStyle = '#000'; this.ctx.stroke(); this.ctx.fill(); /*3.绘制Y轴*/ this.ctx.beginPath(); this.ctx.moveTo(this.x0, this.y0); this.ctx.lineTo(this.space, this.space); this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize); this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize); this.ctx.lineTo(this.space, this.space); this.ctx.stroke(); this.ctx.fill(); } //绘制所有点 LineChart.prototype.drawPointList = function (data) { //测试 //this.drawPoint(200,200); var _this = this; //原来的点 var oldPoint = { x: this.x0, y: this.y0 }; data.forEach(function (item, i) { /*绘制小正方形 就是点*/ /*在绘制之前转成cnavas坐标*/ var x = _this.x0 + item.x; var y = _this.y0 - item.y; _this.drawPoint(x, y); _this.joinPoint(oldPoint, { x: x, y: y }); //连线完毕之后去记录 把这一次的点当做下一次连线的起始点 oldPoint = { x: x, y: y } }); } LineChart.prototype.drawPoint = function (x, y) { this.ctx.moveTo(x - this.pointSize / 2, y - this.pointSize / 2); this.ctx.lineTo(x + this.pointSize / 2, y - this.pointSize / 2); this.ctx.lineTo(x + this.pointSize / 2, y + this.pointSize / 2); this.ctx.lineTo(x - this.pointSize / 2, y + this.pointSize / 2); this.ctx.closePath(); this.ctx.fill(); }; //连接点 LineChart.prototype.joinPoint = function (oldPoint, currPoint) { /*上一个点的坐标和现在的坐标相连*/ //oldPoint {x,y} //currPoint {x,y} this.ctx.beginPath(); this.ctx.moveTo(oldPoint.x, oldPoint.y); this.ctx.lineTo(currPoint.x, currPoint.y); this.ctx.stroke(); }; //使用 var lineChart = new LineChart(); lineChart.init(data); </script>