12-es6类的方式封装折线图

  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>