制作坐標繪圖效果 · 前端速查手冊

[TOC] >[success] # 制作坐標繪圖效果 ~~~ 1.先繪制一個表格 2.在繪制坐標軸 ~~~ >[danger] ##### 繪制一個網格 ![](https://box.kancloud.cn/b4040cff49526f23536794575ccc2815_680x438.png) ~~~ 1.獲取畫布寬度 ctx.canvas.width 2.獲取畫布高度 ctx.canvas.height 3.計算可以x軸網格數 var xLineTotal = Math.floor(canvasHeight / gridSize); 4.計算可以y軸網格數 var yLineTotal = Math.floor(canvasWidth / gridSize); 5.繪制x軸平行的網格，x軸期點是0，y軸的起點是設置線條距離，lineTo設置線條的終點也就是畫布的寬，y軸的起點是設置線條距離 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.繪制網格*/ /*2.網格的大小*/ var gridSize = 10; var canvasHeight = ctx.canvas.height; var canvasWidth = ctx.canvas.width; /*3.畫多少條X軸方向的線橫線的條數畫布高度*/ /*var canvasHeight = myCanvas.height; var canvasWidth = myCanvas.width; console.log(canvasHeight); console.log(canvasWidth);*/ /*console.log(ctx.canvas.width); console.log(ctx.canvas.height);*/ var xLineTotal = Math.floor(canvasHeight / gridSize); for (var i = 0; i <= xLineTotal; i++) { ctx.beginPath(); ctx.moveTo(0, i * gridSize - 0.5 ); ctx.lineTo(canvasWidth, i * gridSize - 0.5); ctx.strokeStyle = '#eee'; ctx.stroke(); } /*4.畫多少條Y軸方向的線*/ var yLineTotal = Math.floor(canvasWidth / gridSize); for (var i = 0; i <= yLineTotal; i++) { ctx.beginPath(); ctx.moveTo(i*gridSize - 0.5 ,0); ctx.lineTo(i*gridSize - 0.5 ,canvasHeight); ctx.strokeStyle = '#eee'; ctx.stroke(); } /*5.遍歷的形式去畫*/ </script> </body> </html> ~~~ >[danger] ##### 繪制X/Y 軸 ![](https://box.kancloud.cn/782efe23af192a048b37f628a3a69f68_602x394.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border:1px solid #cccccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); // space控制坐標軸和畫布間的距離 var space=20; // 箭頭定位點 var arrowSize = 10; // 計算原點 var canvasWidth = ctx.canvas.width var canvasHeight = ctx.canvas.height var xO = space var yO = canvasHeight - space; // 繪制x軸 ctx.beginPath(); ctx.moveTo(xO,yO) ctx.lineTo(canvasWidth-space,yO) // 繪制箭頭 ctx.lineTo(canvasWidth - space - arrowSize, yO + arrowSize / 2); ctx.lineTo(canvasWidth - space - arrowSize, yO - arrowSize / 2); ctx.lineTo(canvasWidth - space, yO); ctx.fill(); ctx.stroke() /*繪制y軸*/ ctx.beginPath(); ctx.moveTo(xO, yO); ctx.lineTo(space, space); /*箭頭*/ ctx.lineTo(space + arrowSize / 2, space + arrowSize); ctx.lineTo(space - arrowSize / 2, space + arrowSize); ctx.lineTo(space, space); ctx.fill(); ctx.stroke(); </script> </body> </html> ~~~ >[danger] ##### 畫坐標點 ![](https://box.kancloud.cn/05ccf13672db80921404a2d6aa92d956_327x227.png) ~~~ 1.畫一個矩形出來填充 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.繪制點*/ /*2.點的尺寸*/ /*3.以坐標中心繪制點*/ /*點坐標*/ var coordinate = { x:100, y:100 } /*點尺寸*/ var dottedSize = 10; ctx.moveTo(coordinate.x - dottedSize / 2,coordinate.y - dottedSize / 2); ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y - dottedSize / 2); ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y + dottedSize / 2); ctx.lineTo(coordinate.x - dottedSize / 2,coordinate.y + dottedSize / 2); ctx.closePath(); ctx.fill(); </script> </body> </html> ~~~ >[success] # 函數封裝折線圖 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> /*1.構造函數*/ 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.gridSize = 10; /*坐標系的間距*/ this.space = 20; /*坐標原點*/ this.x0 = this.space; this.y0 = this.canvasHeight - this.space; /*箭頭的大小*/ this.arrowSize = 10; /*繪制點*/ this.dottedSize = 6; /*點的坐標和數據有關系數據可視化*/ } /*2.行為方法*/ LineChart.prototype.init = function (data) { this.drawGrid(); this.drawAxis(); this.drawDotted(data); }; /*繪制網格*/ LineChart.prototype.drawGrid = function () { /*x方向的線*/ var xLineTotal = Math.floor(this.canvasHeight / this.gridSize); this.ctx.strokeStyle = '#eee'; for (var i = 0; i <= xLineTotal; 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.stroke(); } /*y方向的線*/ var yLineTotal = Math.floor(this.canvasWidth / this.gridSize); for (var i = 0; i <= yLineTotal; 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.stroke(); } }; /*繪制坐標系*/ LineChart.prototype.drawAxis = function () { /*X軸*/ this.ctx.beginPath(); this.ctx.strokeStyle = '#000'; 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.stroke(); this.ctx.fill(); /*Y軸*/ this.ctx.beginPath(); this.ctx.strokeStyle = '#000'; 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.drawDotted = function (data) { /*1.數據的坐標需要轉換 canvas坐標*/ /*2.再進行點的繪制*/ /*3.把線連起來*/ var that = this; /*記錄當前坐標*/ var prevCanvasX = 0; var prevCanvasY = 0; data.forEach(function (item, i) { /* x = 原點的坐標 + 數據的坐標 */ /* y = 原點的坐標 - 數據的坐標 */ var canvasX = that.x0 + item.x; var canvasY = that.y0 - item.y; /*繪制點*/ that.ctx.beginPath(); that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2); that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2); that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2); that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2); that.ctx.closePath(); that.ctx.fill(); /*點的連線*/ /*當時第一個點的時候起點是 x0 y0*/ /*當時不是第一個點的時候起點是上一個點*/ if(i == 0){ that.ctx.beginPath(); that.ctx.moveTo(that.x0,that.y0); that.ctx.lineTo(canvasX,canvasY); that.ctx.stroke(); }else{ /*上一個點*/ that.ctx.beginPath(); that.ctx.moveTo(prevCanvasX,prevCanvasY); that.ctx.lineTo(canvasX,canvasY); that.ctx.stroke(); } /*記錄當前的坐標，下一次要用*/ prevCanvasX = canvasX; prevCanvasY = canvasY; }); }; /*3.初始化*/ var data = [ { x: 100, y: 120 }, { x: 200, y: 160 }, { x: 300, y: 240 }, { x: 400, y: 120 }, { x: 500, y: 80 } ]; var lineChart = new LineChart(); lineChart.init(data); </script> </body> </html> ~~~