【Canvas】绘制几何级数Geometric series曲线 y=1+1/2+1/4+1/8+1/16+1/32+1/64+....
相关资料: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
【Canvas】绘制几何级数Geometric series曲线 y=1+1/2+1/4+1/8+1/16+1/32+1/64+....的更多相关文章
- 【Canvas】勾画调和级数Harmonic series 曲线 y=1+1/2+1/3+1/4+1/5+1/6+1/7+1/8+....
相关资料:https://baike.baidu.com/item/%E8%B0%83%E5%92%8C%E7%BA%A7%E6%95%B0/8019971?fr=aladdin 调和级数(英语:Ha ...
- canvas绘制二次贝塞尔曲线----演示二次贝塞尔四个参数的作用
canvas中绘制二次贝塞尔曲线的方法为ctx.quadraticCurveTo(x1,y1,x2,y2); 四个参数分别为两个控制点的坐标.开始点即当前canvas中目前的点,如果想从指定的点开始, ...
- canvas 绘制三次贝塞尔曲线
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- canvas 绘制二次贝塞尔曲线
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- canvas绘制矩形
canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...
- canvas绘制贝塞尔曲线
原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如 ...
- javascript -- canvas绘制曲线
绘制曲线有几种思路: 1.通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2.通过bezierCurveTo(controlX1 ...
- canvas绘制曲线
canvas绘制曲线 方法 quadraticCurveTo(cp1x, cp1y, x, y) 只有一个控制点的贝塞尔曲线(其实就是控制点分别与起始点和结束点连线的公切线) bezierCurveT ...
- canvas绘制形状
栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0) ...
随机推荐
- 3-JavaSe-1-stream-1-流库特征
1.parallelStream可以让流库以并行方式来执行过滤和计数. String content=new String(Files.readAllBytes(Paths.get("D:\ ...
- shell脚本编写mind
首先我们要缩小这个问题的范围 如果在面试中被问到这样的问题,说说shell脚本编写思路 如:你是在公司主要负责zabbix监控的 对答如下:shell脚本这个说法挺广的,您看我这么跟您说吧,我在平时工 ...
- Manjaro安装mysql-5.7折腾小记
安装前准备: 现在Arch官方源是MariaDB,所以得从mysql官网下载,地址:https://www.mysql.com/downloads/ 选择一个合适的版本下载: 下载下来先将压缩文件解压 ...
- linux----centos7 yum安装lnmp+zabbix
安装yum utils工具包,若不安装则会找不到命令yum-config-manageryum -y install yum-utils 启用yum仓库yum-config-manager --ena ...
- nginx基础概述
为什么选择nginx nginx非常轻量 互联网公司都选择nginx nginx技术成熟,具备的功能时企业最常用使用而且最需要的 适合当前主流架构趋势,微服务.云架构.中间层 统一技术 ...
- Nginx- web服务配置与测试
(一) 软件介绍由俄罗斯人lgor Sysove开发,为开源软件.支持高并发:支持几万并发连接(特别是静态小文件业务环境) 资源消耗少:在3万并发连接下开启10个Nginx线程消耗内存不到200M 支 ...
- vue 关于vuex
<!-- vuex 配置js store.js -->1.引入vue和vuex import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vu ...
- evpp 上传文件问题转
背景 因为项目需求,需要使用360的evpp库,来实现一个接口,支持文件上传. 实际操作过程中,发现了一些问题,记录下来. 前端文件上传方式 简单的使用input标签 <body> < ...
- Parameter 0 of method redisTemplate in org.springframework.boot.autoconfigure.data.redis.RedisAutoConfiguration required a bean of type 'org.springframework.data.redis.connection.RedisConnectionFactor
Error starting ApplicationContext. To display the conditions report re-run your application with 'de ...
- Thread.sleep()和Thread.currentThread().sleep()区别
先看一下代码 public class Thread1 extends Thread{ @Override public void run() { try { System.out.println(& ...