1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>11-Canvas绘制折线图</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 // 3.定义变量保存小方格的尺寸 26 let gridSize = 50; 27 // 4.拿到canvas的宽高 28 let canvasWidth = oCtx.canvas.width; 29 let canvasHeight = oCtx.canvas.height; 30 // 5.计算在垂直方向和水平方向可以绘制多少条横线 31 let row = Math.floor(canvasHeight / gridSize); 32 let col = Math.floor(canvasWidth / gridSize); 33 // 6.绘制垂直方向的横线 34 for(let i = 0; i < row; i++){ 35 oCtx.beginPath(); 36 oCtx.moveTo(0, i * gridSize - 0.5); 37 oCtx.lineTo(canvasWidth, i * gridSize - 0.5); 38 oCtx.strokeStyle = "#ccc"; 39 oCtx.stroke(); 40 } 41 // 7.绘制水平方向的横线 42 for(let i = 0; i < col; i++){ 43 oCtx.beginPath(); 44 oCtx.moveTo(i * gridSize - 0.5, 0); 45 oCtx.lineTo(i * gridSize - 0.5, canvasHeight); 46 oCtx.strokeStyle = "#ccc"; 47 oCtx.stroke(); 48 } 49 50 // 1.计算坐标系原点的位置 51 let originX = gridSize; 52 let originY = canvasHeight - gridSize; 53 // 2.计算X轴终点的位置 54 let endX = canvasWidth - gridSize; 55 // 3.绘制X轴 56 oCtx.beginPath(); 57 oCtx.moveTo(originX, originY); 58 oCtx.lineTo(endX, originY); 59 oCtx.strokeStyle = "#000"; 60 oCtx.stroke(); 61 // 4.绘制X轴的箭头 62 oCtx.lineTo(endX - 10, originY + 5); 63 oCtx.lineTo(endX - 10, originY - 5); 64 oCtx.lineTo(endX, originY); 65 oCtx.fill(); 66 67 // 5.计算Y轴终点的位置 68 let endY = gridSize; 69 // 3.绘制Y轴 70 oCtx.beginPath(); 71 oCtx.moveTo(originX, originY); 72 oCtx.lineTo(originX, endY); 73 oCtx.strokeStyle = "#000"; 74 oCtx.stroke(); 75 // 4.绘制X轴的箭头 76 oCtx.lineTo(originX - 5, endY + 10); 77 oCtx.lineTo(originX + 5, endY + 10); 78 oCtx.lineTo(originX, endY); 79 oCtx.fill(); 80 81 // 1.拿到服务器返回数据 82 let list = [ 83 { 84 x: 100, 85 y: 300 86 }, 87 { 88 x: 200, 89 y: 200 90 }, 91 { 92 x: 300, 93 y: 250 94 }, 95 { 96 x: 400, 97 y: 100 98 }, 99 ]; 100 let dotSize = 20; 101 // 2.绘制数据点 102 for(let i = 0; i < list.length; i++){ 103 oCtx.beginPath(); 104 oCtx.moveTo(list[i].x - dotSize / 2, list[i].y - dotSize / 2); 105 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y - dotSize / 2); 106 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y + dotSize - dotSize / 2); 107 oCtx.lineTo(list[i].x - dotSize / 2, list[i].y + dotSize - dotSize / 2); 108 oCtx.closePath(); 109 oCtx.fill(); 110 } 111 112 // 1.绘制折线 113 oCtx.beginPath(); 114 for(let i = 0; i < list.length; i++){ 115 if(i === 0){ 116 oCtx.moveTo(list[i].x, list[i].y); 117 }else{ 118 oCtx.lineTo(list[i].x, list[i].y); 119 } 120 } 121 oCtx.strokeStyle = "blue"; 122 oCtx.stroke(); 123 </script> 124 </body> 125 </html>