知識點回顧：
知識點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>
效果圖如下：
