1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12-Canvas折线图封装</title> 6 <!----> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 canvas{ 13 display: block; 14 margin: 0 auto; 15 background: red; 16 } 17 </style> 18 </head> 19 <body> 20 <script> 21 /* 22 面向过程: 亲力亲为 23 面向对象: 找对象, 让对象做事情 24 找一个折线图对象, 你给我画格子, 你给我画坐标系, 你给我画数据点, 你给我画折线 25 * */ 26 class LineChart{ 27 constructor(width=300, height=150){ 28 // 1.创建canvas 29 this.canvas = document.createElement("canvas"); 30 this.canvas.width = width; 31 this.canvas.height = height; 32 document.body.appendChild(this.canvas); 33 // 2.拿到绘图工具 34 this.ctx = this.canvas.getContext("2d"); 35 } 36 drawGrid(gridSize=20){ 37 let oCtx = this.ctx; 38 // 4.拿到canvas的宽高 39 let canvasWidth = oCtx.canvas.width; 40 let canvasHeight = oCtx.canvas.height; 41 // 5.计算在垂直方向和水平方向可以绘制多少条横线 42 let row = Math.floor(canvasHeight / gridSize); 43 let col = Math.floor(canvasWidth / gridSize); 44 // 6.绘制垂直方向的横线 45 for(let i = 0; i < row; i++){ 46 oCtx.beginPath(); 47 oCtx.moveTo(0, i * gridSize - 0.5); 48 oCtx.lineTo(canvasWidth, i * gridSize - 0.5); 49 oCtx.strokeStyle = "#ccc"; 50 oCtx.stroke(); 51 } 52 // 7.绘制水平方向的横线 53 for(let i = 0; i < col; i++){ 54 oCtx.beginPath(); 55 oCtx.moveTo(i * gridSize - 0.5, 0); 56 oCtx.lineTo(i * gridSize - 0.5, canvasHeight); 57 oCtx.strokeStyle = "#ccc"; 58 oCtx.stroke(); 59 } 60 } 61 drawCoor(gridSize=20){ 62 let oCtx = this.ctx; 63 let canvasWidth = this.ctx.canvas.width; 64 let canvasHeight = this.ctx.canvas.height; 65 66 // 1.计算坐标系原点的位置 67 let originX = gridSize; 68 let originY = canvasHeight - gridSize; 69 // 2.计算X轴终点的位置 70 let endX = canvasWidth - gridSize; 71 // 3.绘制X轴 72 oCtx.beginPath(); 73 oCtx.moveTo(originX, originY); 74 oCtx.lineTo(endX, originY); 75 oCtx.strokeStyle = "#000"; 76 oCtx.stroke(); 77 // 4.绘制X轴的箭头 78 oCtx.lineTo(endX - 10, originY + 5); 79 oCtx.lineTo(endX - 10, originY - 5); 80 oCtx.lineTo(endX, originY); 81 oCtx.fill(); 82 83 // 5.计算Y轴终点的位置 84 let endY = gridSize; 85 // 3.绘制Y轴 86 oCtx.beginPath(); 87 oCtx.moveTo(originX, originY); 88 oCtx.lineTo(originX, endY); 89 oCtx.strokeStyle = "#000"; 90 oCtx.stroke(); 91 // 4.绘制X轴的箭头 92 oCtx.lineTo(originX - 5, endY + 10); 93 oCtx.lineTo(originX + 5, endY + 10); 94 oCtx.lineTo(originX, endY); 95 oCtx.fill(); 96 } 97 drawDot(list, dotSize=10){ 98 let oCtx = this.ctx; 99 // 2.绘制数据点 100 for(let i = 0; i < list.length; i++){ 101 oCtx.beginPath(); 102 oCtx.moveTo(list[i].x - dotSize / 2, list[i].y - dotSize / 2); 103 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y - dotSize / 2); 104 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y + dotSize - dotSize / 2); 105 oCtx.lineTo(list[i].x - dotSize / 2, list[i].y + dotSize - dotSize / 2); 106 oCtx.closePath(); 107 oCtx.fill(); 108 } 109 } 110 drawLine(list){ 111 let oCtx = this.ctx; 112 oCtx.beginPath(); 113 for(let i = 0; i < list.length; i++){ 114 if(i === 0){ 115 oCtx.moveTo(list[i].x, list[i].y); 116 }else{ 117 oCtx.lineTo(list[i].x, list[i].y); 118 } 119 } 120 oCtx.stroke(); 121 } 122 } 123 124 let list = [ 125 { 126 x: 100, 127 y: 300 128 }, 129 { 130 x: 200, 131 y: 200 132 }, 133 { 134 x: 300, 135 y: 250 136 }, 137 { 138 x: 400, 139 y: 100 140 }, 141 ]; 142 let lineChart = new LineChart(500, 400); 143 lineChart.drawGrid(50); 144 lineChart.drawCoor(50); 145 lineChart.drawDot(list); 146 lineChart.drawLine(list); 147 </script> 148 </body> 149 </html>