相关资料：https://baike.baidu.com/item/%E5%87%A0%E4%BD%95%E7%BA%A7%E6%95%B0/112584?fr=aladdin
图线：
代码：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>几何级数Geometric series曲线 作者:逆火狂飙 https://www.cnblogs.com/xiandedanteng/category/1133377.html</title> </head> <body onload="draw()"> <canvas id="myCanvus" width="1330px" height="640px" style="border:1px dashed black;"> 出现文字表示你的浏览器不支持HTML5 作者:逆火狂飙 https://www.cnblogs.com/xiandedanteng/category/1133377.html </canvas> </body> </html> <script type="text/javascript"> <!-- function draw(){ // 注意：曲线和刻度的坐标和位置是不同的，坐标是数学中的实际值，位置则是Canvas画布上的实际点，两者需要通过步长进行转换 // 步长即XY轴的比例，计算曲线、刻度时需要要位置除以步长，在实际描绘时需要再乘回来 var X_STEP=6.25;// 定义X轴向的步长，即每个刻度之间的距离.X方向刻度在这里控制 var Y_STEP=6.25;// 定义Y轴向的步长，即每个刻度之间的距离.Y方向刻度在这里控制 // Initialize canvas var canvas=document.getElementById("myCanvus"); var canvasWidth=canvas.width; var canvasHeight=canvas.height; var context=canvas.getContext("2d"); // 清出白屏画黑线 context.fillStyle = "white"; context.fillRect(0, 0, canvasWidth, canvasHeight); context.strokeStyle = "black"; context.fillStyle = "black"; // 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向 var offsetY=50;// Y向偏移值，正值向上偏，用来画坐标轴 var offsetX=50;// X向偏移值，正值向右偏，用来画坐标轴 context.save(); context.translate(0+offsetX,canvasHeight-offsetY); // 在旋转之前写文字，以免要转来转去 draw_XAxisText(context,0,canvasWidth-100,X_STEP); draw_YAxisText(context,115-canvas.height,0,Y_STEP); drawTitles(context); context.rotate(getRad(180)); context.scale(-1,1); draw_XAxis(context,0,canvasWidth-100,X_STEP); draw_YAxis(context,0,canvas.height-100,Y_STEP); drawCurve(context,0,canvasWidth-100,X_STEP); context.restore(); } // 计算后描绘曲线 function drawCurve(ctx,start,end,step){ var cds=[{}];// 用来容纳坐标 var i=0; // i是画布中位置（实际值） var x=0.0; // x是数学中的横坐标 var y=1.0; // y是数学中的纵坐标 var arr; // 数组用来存储数学坐标 for(i=step;i<=end;i+=step){ x=i/step; y+=1/Math.pow(2,x);// y=1+1/2+1/4+1/8+1/16 console.log(x+","+y); arr={"x":x,"y":y}; cds.push(arr); } paintCurve(ctx,"red",cds,step); } // 画曲线 function paintCurve(ctx,color,cds,step){ ctx.strokeStyle = color; ctx.beginPath(); for(var i=0; i<cds.length; i++){ ctx.lineTo(cds[i].x*step,cds[i].y*step);// 注意y轴比例 } ctx.stroke(); ctx.closePath(); } // 画Y轴的文字 function draw_YAxisText(ctx,start,end,step){ ctx.lineWidth=0.5; ctx.strokeStyle='navy'; ctx.fillStyle='navy'; // 写文字 var x=-19,y=5,index=1; for(y=start;y<end;y+=step){ if (index % 5==0){ ctx.fillText(-y/step,x,y);// 注意y轴比例 } index++; } } // 画Y轴的轴线，箭头以及刻度 function draw_YAxis(ctx,start,end,step){ ctx.save(); ctx.lineWidth=0.5; ctx.strokeStyle='navy'; ctx.fillStyle='navy'; var arrowEnd=end+12.5; // 画轴 ctx.beginPath(); ctx.moveTo(0, start); ctx.lineTo(0, arrowEnd); ctx.stroke(); ctx.closePath(); // 画箭头 ctx.beginPath(); ctx.moveTo(Math.sin(getRad(15))*10, arrowEnd-Math.cos(getRad(15))*10); ctx.lineTo(0, arrowEnd); ctx.lineTo(-Math.sin(getRad(15))*10, arrowEnd-Math.cos(getRad(15))*10); ctx.stroke(); ctx.closePath(); // 画刻度 var x,y; x=5; for(y=start;y<end;y+=step){// 注意y轴比例 ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(0, y); ctx.stroke(); ctx.closePath(); } } // 画X轴的轴线，箭头以及刻度 function draw_XAxisText(ctx,start,end,step){ ctx.lineWidth=0.5; ctx.strokeStyle='navy'; ctx.fillStyle='navy'; // 写文字 var i=0,x=0,y=5; var index=4; for(i=start;i<end;i+=step){ index++; x=i/step; if(index % 5==0){ ctx.fillText(x,i,y+10); } } } // 画X轴的轴线，箭头以及刻度 function draw_XAxis(ctx,start,end,step){ ctx.save(); ctx.lineWidth=0.5; ctx.strokeStyle='navy'; ctx.fillStyle='navy'; var arrowEnd=end+12.5; // 画轴 ctx.beginPath(); ctx.moveTo(start, 0); ctx.lineTo(arrowEnd, 0); ctx.stroke(); ctx.closePath(); // 画箭头 ctx.beginPath(); ctx.moveTo(arrowEnd-Math.cos(getRad(15))*10, Math.sin(getRad(15))*10); ctx.lineTo(arrowEnd, 0); ctx.lineTo(arrowEnd-Math.cos(getRad(15))*10, -Math.sin(getRad(15))*10); ctx.stroke(); ctx.closePath(); // 画刻度 var x,y; y=5; for(x=start;x<end;x+=step){ ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, y); ctx.stroke(); ctx.closePath(); } ctx.restore(); } // 在画布上写说明文字 function drawTitles(ctx){ ctx.lineWidth=0.5; ctx.strokeStyle='navy'; ctx.font="bold 16px 宋体"; ctx.fillStyle='navy'; // 这两个位置自己根据感觉调，摆得合适不遮挡即可 var x=800; var y=-550; // 写文字 ctx.fillText("y=1+1/2+1/4+1/8+1/16+1/32+1/64+....",x,y); ctx.fillText("几何级数图线",x,y+20); ctx.fillText(" 绘制:逆火狂飙",x+170,y+40); } // 由角度得到弧度 function getRad(degree){ return degree/180*Math.PI; } // 截短长字符串 function cutShort(str,length){ if(str.length>length){ str=str.substr(0,length)+"..."; } return str; } //--> </script>
Chrome console打出来的坐标值，可以看到从第53项就完全收敛了：
jihe.html:69 1,1.5
jihe.html:69 2,1.75
jihe.html:69 3,1.875
jihe.html:69 4,1.9375
jihe.html:69 5,1.96875
jihe.html:69 6,1.984375
jihe.html:69 7,1.9921875
jihe.html:69 8,1.99609375
jihe.html:69 9,1.998046875
jihe.html:69 10,1.9990234375
jihe.html:69 11,1.99951171875
jihe.html:69 12,1.999755859375
jihe.html:69 13,1.9998779296875
jihe.html:69 14,1.99993896484375
jihe.html:69 15,1.999969482421875
jihe.html:69 16,1.9999847412109375
jihe.html:69 17,1.9999923706054688
jihe.html:69 18,1.9999961853027344
jihe.html:69 19,1.9999980926513672
jihe.html:69 20,1.9999990463256836
jihe.html:69 21,1.9999995231628418
jihe.html:69 22,1.999999761581421
jihe.html:69 23,1.9999998807907104
jihe.html:69 24,1.9999999403953552
jihe.html:69 25,1.9999999701976776
jihe.html:69 26,1.9999999850988388
jihe.html:69 27,1.9999999925494194
jihe.html:69 28,1.9999999962747097
jihe.html:69 29,1.9999999981373549
jihe.html:69 30,1.9999999990686774
jihe.html:69 31,1.9999999995343387
jihe.html:69 32,1.9999999997671694
jihe.html:69 33,1.9999999998835847
jihe.html:69 34,1.9999999999417923
jihe.html:69 35,1.9999999999708962
jihe.html:69 36,1.999999999985448
jihe.html:69 37,1.999999999992724
jihe.html:69 38,1.999999999996362
jihe.html:69 39,1.999999999998181
jihe.html:69 40,1.9999999999990905
jihe.html:69 41,1.9999999999995453
jihe.html:69 42,1.9999999999997726
jihe.html:69 43,1.9999999999998863
jihe.html:69 44,1.9999999999999432
jihe.html:69 45,1.9999999999999716
jihe.html:69 46,1.9999999999999858
jihe.html:69 47,1.999999999999993
jihe.html:69 48,1.9999999999999964
jihe.html:69 49,1.9999999999999982
jihe.html:69 50,1.9999999999999991
jihe.html:69 51,1.9999999999999996
jihe.html:69 52,1.9999999999999998
jihe.html:69 53,2
jihe.html:69 54,2
jihe.html:69 55,2
jihe.html:69 56,2
jihe.html:69 57,2
jihe.html:69 58,2
jihe.html:69 59,2
jihe.html:69 60,2
jihe.html:69 61,2
jihe.html:69 62,2
jihe.html:69 63,2
jihe.html:69 64,2
jihe.html:69 65,2
jihe.html:69 66,2
jihe.html:69 67,2
jihe.html:69 68,2
jihe.html:69 69,2
jihe.html:69 70,2
jihe.html:69 71,2
jihe.html:69 72,2
jihe.html:69 73,2
jihe.html:69 74,2
jihe.html:69 75,2
jihe.html:69 76,2
jihe.html:69 77,2
jihe.html:69 78,2
jihe.html:69 79,2
jihe.html:69 80,2
jihe.html:69 81,2
jihe.html:69 82,2
jihe.html:69 83,2
jihe.html:69 84,2
jihe.html:69 85,2
jihe.html:69 86,2
jihe.html:69 87,2
jihe.html:69 88,2
jihe.html:69 89,2
jihe.html:69 90,2
jihe.html:69 91,2
jihe.html:69 92,2
jihe.html:69 93,2
jihe.html:69 94,2
jihe.html:69 95,2
jihe.html:69 96,2
jihe.html:69 97,2
jihe.html:69 98,2
jihe.html:69 99,2
jihe.html:69 100,2
jihe.html:69 101,2
jihe.html:69 102,2
jihe.html:69 103,2
jihe.html:69 104,2
jihe.html:69 105,2
jihe.html:69 106,2
jihe.html:69 107,2
jihe.html:69 108,2
jihe.html:69 109,2
jihe.html:69 110,2
jihe.html:69 111,2
jihe.html:69 112,2
jihe.html:69 113,2
jihe.html:69 114,2
jihe.html:69 115,2
jihe.html:69 116,2
jihe.html:69 117,2
jihe.html:69 118,2
jihe.html:69 119,2
jihe.html:69 120,2
jihe.html:69 121,2
jihe.html:69 122,2
jihe.html:69 123,2
jihe.html:69 124,2
jihe.html:69 125,2
jihe.html:69 126,2
jihe.html:69 127,2
jihe.html:69 128,2
jihe.html:69 129,2
jihe.html:69 130,2
jihe.html:69 131,2
jihe.html:69 132,2
jihe.html:69 133,2
jihe.html:69 134,2
jihe.html:69 135,2
jihe.html:69 136,2
jihe.html:69 137,2
jihe.html:69 138,2
jihe.html:69 139,2
jihe.html:69 140,2
jihe.html:69 141,2
jihe.html:69 142,2
jihe.html:69 143,2
jihe.html:69 144,2
jihe.html:69 145,2
jihe.html:69 146,2
jihe.html:69 147,2
jihe.html:69 148,2
jihe.html:69 149,2
jihe.html:69 150,2
jihe.html:69 151,2
jihe.html:69 152,2
jihe.html:69 153,2
jihe.html:69 154,2
jihe.html:69 155,2
jihe.html:69 156,2
jihe.html:69 157,2
jihe.html:69 158,2
jihe.html:69 159,2
jihe.html:69 160,2
jihe.html:69 161,2
jihe.html:69 162,2
jihe.html:69 163,2
jihe.html:69 164,2
jihe.html:69 165,2
jihe.html:69 166,2
jihe.html:69 167,2
jihe.html:69 168,2
jihe.html:69 169,2
jihe.html:69 170,2
jihe.html:69 171,2
jihe.html:69 172,2
jihe.html:69 173,2
jihe.html:69 174,2
jihe.html:69 175,2
jihe.html:69 176,2
jihe.html:69 177,2
jihe.html:69 178,2
jihe.html:69 179,2
jihe.html:69 180,2
jihe.html:69 181,2
jihe.html:69 182,2
jihe.html:69 183,2
jihe.html:69 184,2
jihe.html:69 185,2
jihe.html:69 186,2
jihe.html:69 187,2
jihe.html:69 188,2
jihe.html:69 189,2
jihe.html:69 190,2
jihe.html:69 191,2
jihe.html:69 192,2
jihe.html:69 193,2
jihe.html:69 194,2
jihe.html:69 195,2
jihe.html:69 196,2
--END-- 2019年11月10日10:07:43