效果展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas { display: block; margin: 80px auto; border:1px solid red; } </style> </head> <body> <canvas width="600px" height="400px"></canvas> <script> //获取canvas元素 var myCanvas = document.querySelector('canvas'); //获取上下文 var ctx = myCanvas.getContext('2d'); //构造函数 var LineChart = function(ctx){ this.ctx = ctx || document.querySelector('canvas').getContext('2d'); //画布大小 this.canvasWidth = this.ctx.canvas.width; this.canvasHeight = this.ctx.canvas.height; //网格大小 this.grad = 20; //坐标系间距 this.space = 20; //箭头大小 this.arrowSize = 20; //点的大小 this.dottedSize = 6; //点的坐标 } //行为方法 LineChart.prototype.init = function(data){ this.drawGrid(); this.drawAxis(); this.drawDotted(data); } //绘制网格 LineChart.prototype.drawGrid = function(){ //1.绘制网格 var xlinesNum = parseInt(this.canvasHeight / this.grad); var yLinesNum = parseInt(this.canvasWidth/this.grad); for(var i = 1; i < xlinesNum; i++) { this.ctx.beginPath(); this.ctx.moveTo(0,this.grad * i - 0.5); this.ctx.lineTo(this.canvasWidth,this.grad * i - 0.5); this.ctx.stroke(); } for(var i = 1; i < yLinesNum; i++) { ctx.beginPath(); ctx.moveTo(this.grad * i - 0.5,0); ctx.lineTo(this.grad * i - 0.5,this.canvasWidth); ctx.stroke(); } } //绘制坐标系 LineChart.prototype.drawAxis = function(){ var x0 = this.space; var y0 = this.canvasHeight - this.space; var x = this.canvasWidth - this.space; var arrowSize = this.arrowSize; var space = this.space; //绘制水平轴 this.ctx.beginPath(); this.ctx.moveTo(x0,y0); this.ctx.lineTo(x,y0); this.ctx.lineTo(x-arrowSize,y0+arrowSize/2); this.ctx.lineTo(x-arrowSize,y0-arrowSize/2); this.ctx.lineTo(x,y0); this.ctx.fillStyle = 'red'; this.ctx.fill(); this.ctx.lineWidth = 2; this.ctx.strokeStyle = 'red'; this.ctx.stroke(); //绘制y轴 this.ctx.beginPath(); this.ctx.moveTo(x0,y0); this.ctx.lineTo(x0,space); this.ctx.lineTo(space+arrowSize/2,space+arrowSize); this.ctx.lineTo(space-arrowSize/2,space+arrowSize); this.ctx.lineTo(x0,space); this.ctx.fillStyle = 'red'; this.ctx.fill(); this.ctx.strokeStyle = 'red'; this.ctx.lineWidth = 2; this.ctx.stroke(); } //绘制点 LineChart.prototype.drawDotted = function(data){ var that =this; var dottedSize = this.dottedSize; var prevcanvasX = 0; var prevcanvasY = 0; data.forEach(function(item,i){ this.ctx.beginPath(); // x=原点坐标 +数据坐标 // y = 原点坐标 - 数据坐标 var canvasX = that.space + item.x; var canvasY = that.canvasHeight - that.space - item.y; console.log(canvasX); console.log(canvasY); that.ctx.moveTo(canvasX-dottedSize/2,canvasY-dottedSize/2); that.ctx.lineTo(canvasX+dottedSize/2,canvasY-dottedSize/2); that.ctx.lineTo(canvasX+dottedSize/2,canvasY+dottedSize/2); that.ctx.lineTo(canvasX-dottedSize/2,canvasY+dottedSize/2); that.ctx.fillStyle = 'red'; that.ctx.fill(); // 连线 if(i==0) { that.ctx.beginPath(); that.ctx.moveTo(that.space,that.canvasHeight - that.space); that.ctx.lineTo(canvasX,canvasY); that.ctx.lineWidth = 1; that.ctx.stroke(); }else { that.ctx.beginPath(); that.ctx.moveTo(prevcanvasX,prevcanvasY); that.ctx.lineTo(canvasX,canvasY); that.ctx.lineWidth = 1; that.ctx.stroke(); } //记录上次的点 prevcanvasX = canvasX; prevcanvasY = canvasY; }); } var data = [{ x:100, y:100 },{ x:200, y:160 },{ x:300, y:240 },{ x:400, y:320 },{ x:500, y:100 }]; var newLineChart = new LineChart(); newLineChart.init(data); </script> </body> </html>