【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) ...
随机推荐
- springboot 打包发布(war包)
版本关系: 软件名称 版本号 软件名称 版本号 spring boot 2.x jdk 1.8 tomcat 9.x springboot中的pom.xml文件 打包:右键点击项目,选择如下图: 填写 ...
- kvm虚拟机在线调整硬件配置
#centos5.x版本不支持动态调整内存,CPU,以下是在centos6.x上测试 1.查看虚拟机信息 shell> virsh dumpxml cos_v1 | head -n 10 < ...
- 【ansible】密钥免密登陆使用重点
Ansible 密钥免密登陆使用重点 1.配置/etc/ansible/hosts 2.配置公钥以及秘钥 authorized_keys 放置公钥文件 .ssh 放置密钥文件 密钥文件名称必须为 id ...
- 用js刷剑指offer(从上到下打印二叉树)
题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 牛客网链接 js代码 /* function TreeNode(x) { this.val = x; this.left = null ...
- Java学习笔记——第1篇
Java程序运行机制 Java程序要经过先编译,后解释两个步骤 编译型:高级语言源码 -->机器码(一次性) 生成可执行程序,脱离开发环境,在指定平台上运行.(C/C++/Objectiv ...
- 检查shell脚本
1.检查solr服务监控脚本: #/bin/bash starttime=$(date +%Y-%m-%d\ %H:%M:%S) http_code=$(curl -I -m -o /dev//sol ...
- 2星|项立刚《5G时代》：资料堆砌和一些假想设想，信息浓度太低
“ 这是一本关于5G的书,但着眼点不是要说清楚5G的技术,因为解读5G技术的图书已经有很多,我自己也不是技术专家.本书是希望探讨在一个全新的网络体系下产业的发展与改变,以及5G对社会与经济的影响.P6 ...
- python 爬虫相关含Scrapy框架
1.从酷狗网站爬取 新歌首发的新歌名字.播放时长.链接等 from bs4 import BeautifulSoup as BS import requests import re import js ...
- 利用random模块做一个抢红包功能
我们都知道random模块是一个生成随机数的模块,用它来做抢红包的功能很合适. 抢红包,抢到的金额是随机的,但怎么让每个人抢到的随机金额公平合理呢 比如:我想发一个100元的红包让10个人抢,我可以把 ...
- IntelliJ IDEA lombok插件的安装和使用
IntelliJ IDEA是一款非常优秀的集成开发工具,功能强大,而且插件众多.lombok是开源的代码生成库,是一款非常实用的小工具,我们在编辑实体类时可以通过lombok注解减少getter.se ...