知识点回顾：
知识点1：
measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。
JavaScript 语法：context.measureText(text).width;
text是要测量的文本；
知识点2：
illText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
提示：使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
JavaScript 语法：context.fillText(text,x,y,maxWidth);
参数值
| 参数 | 描述 |
|---|---|
| text | 规定在画布上输出的文本。 |
| x | 开始绘制文本的 x 坐标位置（相对于画布）。 |
| y | 开始绘制文本的 y 坐标位置（相对于画布）。 |
| maxWidth | 可选。允许的最大文本宽度，以像素计。 |
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div id="container"> 9 <canvas id="can"> 10 你的浏览器不支持canvas，请升级浏览器 11 </canvas> 12 </div> 13 <script> 14 var canvas=document.getElementById('can'); 15 var ctx=canvas.getContext('2d'); 16 canvas.width=800; 17 canvas.height=600; 18 // 给定的点 19 nums = [268,1236,1273,1545,1988]; 20 datas = ["11.1-11.2","11.3-11.9","11.10-11.16","11.17-11.23","11.24-11.30"]; 21 //画出坐标线 22 function drawBorder(){ 23 var arrowWidth=10; 24 ctx.beginPath(); 25 ctx.moveTo(100,550); 26 ctx.lineTo(700,550); 27 ctx.lineTo(700-arrowWidth,550-arrowWidth); 28 ctx.lineTo(700,550); 29 ctx.lineTo(700-arrowWidth,550+arrowWidth); 30 ctx.stroke(); 31 ctx.beginPath(); 32 var arrowWidth=10; 33 ctx.moveTo(100,550); 34 ctx.lineTo(100,10); 35 ctx.lineTo(100-arrowWidth,50+arrowWidth); 36 ctx.lineTo(100,10); 37 ctx.lineTo(100+arrowWidth,50+arrowWidth); 38 ctx.stroke(); 39 } 40 //画出折线 41 function drawLine(){ 42 //因为5个点，只要画出4条折线，因此只需要nums.length-1; 43 for(var i=0;i<nums.length-1;i++){ 44 //起始坐标 45 var numsX=i*100+150;//x坐标是从100起始的；x轴长500；将600坐标同等分为5份；； 46 var numsY=550-nums[i]/5;//y坐标是从50起始的；y轴长500；从550开始同比例缩放5倍； 47 //终止坐标 48 var numsNx=(i+1)*100+150; 49 var numsNy=550-nums[i+1]/5; 50 ctx.beginPath(); 51 ctx.moveTo(numsX,numsY); 52 ctx.lineTo(numsNx,numsNy); 53 ctx.lineWidth=6; 54 ctx.strokeStyle='skyblue'; 55 ctx.closePath(); 56 ctx.stroke(); 57 } 58 } 59 //绘制折线点的菱形和数值，横坐标值，纵坐标值 60 function drawBlock(){ 61 for(var i=0;i<nums.length;i++){ 62 var numsY = 550-nums[i]/5; 63 var numsX = i*100+150; 64 ctx.beginPath(); 65 // 画出折线上的方块 66 ctx.moveTo(numsX-4,numsY); 67 ctx.lineTo(numsX,numsY-4); 68 ctx.lineTo(numsX+4,numsY); 69 ctx.lineTo(numsX,numsY+4); 70 ctx.fill(); 71 ctx.font= "15px scans-serif"; 72 ctx.fillStyle='black'; 73 // 画出折线上的方块完毕 74 //折线上的点值 75 var text=ctx.measureText(nums[i]); 76 ctx.fillText(nums[i],numsX-text.width,numsY-10); 77 //绘制纵坐标 78 var colText=ctx.measureText((nums.length-i)*500); 79 ctx.fillText((nums.length-i)*500,90-colText.width,i*100+55); 80 //绘制横坐标并判断 81 if(i<5){ 82 var rowText=ctx.measureText(datas[i]); 83 ctx.fillText(datas[i],numsX-rowText.width/2,570); 84 }else if(i==5){ 85 return; 86 } 87 ctx.closePath(); 88 ctx.stroke(); 89 90 } 91 } 92 drawBorder(); 93 drawLine(); 94 drawBlock(); 95 </script> 96 97 </body> 98 </html>
效果图如下：
