【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) ...
随机推荐
- SQL SERVER-JOB搬迁脚本
选中JOB,按F7打开对象游览器: 选中相应的JOB,生成脚本. 搬迁JOB,新实例上要有相应的DB和操作员. 脚本中有2个@enabled,一个是job enable,一个是schedule是否生效 ...
- c# 方法的隐藏
- 系统API是原子操作吗？
系统API里面也会有简单的指令,类似于a++这种,我们认为的简单指令对应到汇编可能很多条.执行在其中某一条汇编的时候可能就切换进程了.切换进程可能发生在用户态(虚拟内存的用户空间),也可能发生在内核态 ...
- AlexNet网络的Pytorch实现
1.文章原文地址 ImageNet Classification with Deep Convolutional Neural Networks 2.文章摘要 我们训练了一个大型的深度卷积神经网络用于 ...
- burp插件debug
java -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005 -jar burpsuite_community_v2. ...
- css全局定位内容图片自动居中
最近在做一个资讯站点时候,因为采集的数据,图片不居中,导致界面很不美观,所以需要全局定义下图片输出时候进行居中. .content img { max-width:800px;_width:expre ...
- vue路由分区结合require.context使用
1.先说路由分区 在router文件夹下新建你要分区的模块例如 登录 订单模块 新建文件 logn.router.js order.router.js 代码如下: export default { ...
- 用vue开发一个所谓的数独
1.前言 最近的后台管理系统页面,功能暂时没有新的需求,就在想首页放什么东西,最近我想到的就是放个所谓的数独,为什么是所谓的数独,因为规则不同于标准的数独,只要求每一行每一列数字不一样就可以了!这个实 ...
- 源码安装mongoDB
1.安装启动 下载源码包,官方地址: wget http://downloads.mongodb.org/linux/mongodb-linux-x86_64-rhel62-3.4.22.tgz 解压 ...
- 第一章使用JSP/Server技术开发新闻发布系统第一章动态网页开发基础
一:为什么需要动态网页 由于静态网页的内容是固定的,不能提供个性化和定制化得服务,使用动态网页可真正地与用户实现互动. 二:什么是动态网页 ①:动态网页是指在服务器端运行的,使用程序语言设 ...