动态正17边光阑Canvas代码,借此向十九世纪伟大数学家高斯致敬
公元前三世纪,欧几里得在《几何原本》中记载了正方形,正五边形,正六边形的做法,后来人们也掌握了正十五边形作图,但之后两千多年,人们没有在更高阶边形上取得突破。
1796年,19岁的高斯证明了正17边形可以由尺规作图作出,但没有给出具体做法;
1825年Johanes Erchinger发表了第一个正十七边形尺规作图法;
1898年,高斯的孙子发现了高斯在1796年3月30日关于正17边形作图的手稿,可以推断,高斯至少在当时在草稿纸上完成了作图分析过程。
我用canvas制作了正十七边形光阑,借此向伟大数学家高斯致敬。
光阑的效果图如下:
代码没有经过大改变,只是在 http://www.cnblogs.com/xiandedanteng/p/8735444.html 的基础上把angleCount改成了17,另外优化了getColor函数。
效果见下面五个图形,想看动画效果请自行下载代码然后用chrome浏览器打开。或者从 https://files.cnblogs.com/files/xiandedanteng/17%E5%85%89%E9%98%91.rar 下载录像观看。
代码下载地址:https://files.cnblogs.com/files/xiandedanteng/20180408_17guanglan.rar
Canvas代码是这样的:
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>17角光阑 2018年4月8日 向高斯致敬</title>
</head>
<body onload="draw()"><canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">出现文字表示你的浏览器不支持HTML5</canvas></body>
</html>
<script type="text/javascript">
<!--
function draw(){
var canvas=document.getElementById('myCanvus');
canvas.width=400;
canvas.height=400;
context=canvas.getContext('2d');
context.translate(200,200);slot=new Slot();
animate();
};
var delta=0; // 旋转角
var radius=0; // 旋转半径
var outerRad=200;// 外径
var context; // 绘画上下文
var slot; // 光阑对象
var angleCount=17;// 三角光阑为3,四角光阑为4,六角光阑为6
function animate(){
context.clearRect(-200,-200,400,400);// 清屏
slot.update(radius,delta,outerRad);
slot.paintBg(context);
slot.paint(context);
slot.paintBase(context);delta+=0.5;
radius+=1;if(radius<outerRad*0.9){ window.requestAnimationFrame(animate);// 让浏览器自行决定帧速率
}
}
function Slot(){
var obj=new Object;
obj.ax=0;
obj.ay=0;
obj.bx=0;
obj.by=0;
obj.cx=0;
obj.cy=0;
obj.angleA=0;
obj.angleB=0;
obj.angleC=0;
obj.radius=0;
obj.outerRad=0;
obj.img=new Image();
obj.img.src="earth.jpg"; // 计算
obj.update=function(radius,theta,outerRad){this.radius=radius;this.outerRad=outerRad; var alpha=Math.acos(radius/outerRad);this.angleA=getRad(theta)+alpha;this.ax=outerRad*Math.cos(this.angleA);this.ay=outerRad*Math.sin(this.angleA);var R=radius/Math.cos(Math.PI/angleCount);this.angleB=getRad(theta)-Math.PI/angleCount;this.bx=R*Math.cos(this.angleB);this.by=R*Math.sin(this.angleB);this.angleC=this.angleA-2*Math.PI/angleCount;this.cx=outerRad*Math.cos(this.angleC);this.cy=outerRad*Math.sin(this.angleC);
};// 画背景
obj.paintBg=function(ctx){context.drawImage(this.img,0,0,800,800,-200,-200,400,400);
};// 描光阑
obj.paint=function(ctx){for(var i=0;i<angleCount;i++){ctx.save();ctx.fillStyle = getColor(i % 9);ctx.rotate(2*Math.PI/angleCount*i);ctx.beginPath();ctx.moveTo(this.ax,this.ay);ctx.lineTo(this.bx,this.by);ctx.lineTo(this.cx,this.cy);ctx.arc(0,0,this.outerRad,this.angleC,this.angleA,false);ctx.closePath();ctx.fill();ctx.restore();}
};// 描基座
obj.paintBase=function(ctx){ctx.strokeStyle = "black";for(var i=0;i<4;i++){ctx.save();ctx.fillStyle = getColor(13);ctx.rotate(Math.PI/2*i);ctx.beginPath();ctx.arc(0,0,this.outerRad,0,Math.PI/2,false);ctx.lineTo(this.outerRad,this.outerRad);ctx.lineTo(this.outerRad,0);ctx.closePath();ctx.fill();ctx.restore();}
};return obj;
}
// 角度得到弧度
function getRad(degree){
return degree/180*Math.PI;
}
// 得到颜色
function getColor(index){
var arr=["green","silver","lime","gray",
"white","yellow","maroon","navy",
"red","blue","purple","teal","fuchsia",
"aqua","black"];
if(index>arr.length){index=index % arr.length;
}return arr[index];
}
//-->
</script>
转载于:https://blog.51cto.com/7726611/2357063
动态正17边光阑Canvas代码,借此向十九世纪伟大数学家高斯致敬相关推荐
- 用Python输出各点两两连接的正17边形
我可以用Python中的Turtle模块来绘制一个正17边形,代码如下:import turtle turtle.forward(50) turtle.left(180-180/17) for i i ...
- 风电随机性动态经济调度模型(Matlab代码实现)
目录 0 写在前面 1 引言 1.1 机会约束规划 1.2 基于场景的方法 1.3 模糊模型 2 六种处理风电随机性动态经济调度模型描述 2.1 考虑正负旋转储备约束的确定性模型 2.2 机会约束的随 ...
- 智能优化算法:正余弦优化算法-附代码
智能优化算法:正余弦优化算法-附代码 文章目录 智能优化算法:正余弦优化算法-附代码 1.算法原理 2.算法流程 3.算法结果 4.参考文献 5.MATLAB代码 6.Python代码 摘要:正 余 ...
- php计算格子xy,经纬度BL和直角坐标XY的正算反算 PHP代码
这篇文章主要介绍了经纬度BL和直角坐标XY的正算反算 PHP代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这里是用的北京54坐标6度分带.需要用其他坐标可以修改参数$_a, $_ ...
- C++动态二维数组演示的代码
将代码过程中经常用到的代码珍藏起来,下边资料是关于C++动态二维数组演示的代码. #include <iostream> #include <string>using name ...
- Git 2.17改进了移动代码差异比较和对象搜索
\ 看新闻很累?看技术新闻更累?试试下载InfoQ手机客户端,每天上下班路上听新闻,有趣还有料! \ \\ Git的最新版本2.17版给出了多个改进,以及一些小的新特性,包括更好的移动代码配色.在历史 ...
- 【OS学习笔记】四十 保护模式十:中断和异常的处理与抢占式多任务对应的汇编代码----动态加载的用户程序/任务二代码
本文是以下几篇文章对应的微型动态加载的用户程序/任务二代码: [OS学习笔记]三十四 保护模式十:中断和异常区别 [OS学习笔记]三十五 保护模式十:中断描述符表.中断门和陷阱门 [OS学习笔记]三十 ...
- 【OS学习笔记】三十九 保护模式十:中断和异常的处理与抢占式多任务对应的汇编代码----动态加载的用户程序/任务一代码
本文是以下几篇文章对应的动态加载的用户程序/任务一代码: [OS学习笔记]三十四 保护模式十:中断和异常区别 [OS学习笔记]三十五 保护模式十:中断描述符表.中断门和陷阱门 [OS学习笔记]三十六 ...
- 使用canvas 代码画小猪佩奇
使用canvas 代码画小猪佩奇 最近不是小猪佩奇很火嘛!!! 前几天 在知乎 看见了别人大佬用python写的 小猪佩奇, 顿时想学 ,可是 自己 没学过python(自己就好爬爬图片,,,,几个 ...
最新文章
- jq取第一个子元素为select_jquery如何获取第一个或最后一个子元素?
- hdu 4768 Flyer 二分
- 短视频出海的关键指标、挑战及应对
- HDU3400+三分
- 华为4X和4C无法使用电信4G的解决办法
- jQuery版Ajax的使用
- jquery排他思想
- Win10环境下使用VS2015编译PJProject
- 深度神经网络的正则化
- 设计开发前的产品原型图
- 什么是Meta分析异质性,怎么处理Meta分析异质性?看完这篇就够了
- 【ANSYS命令流】加载与求解技术(一):节点自由度约束相关命令流
- 搜狗-国内首个双核浏览器
- NRF52832 SDK 14.0.0设置内部32768
- 小白日更第二十九天->DNS域名解析
- Windows 上路由、端口转发配置
- 维度打击,机器学习中的降维算法:ISOMAP MDS
- Termux – Android运行aarch64 – Linux – 安卓设备建站 – 让旧安卓设备老树新花
- 计算机为啥启用不了网络发现,win7系统“网络发现”功能启用不了的解决方法...
- Apache的配置文件详细解释
热门文章
- QScintilla的信号汇总和解释
- python自学笔记
- 从《青云志》看完美世界如何玩转影游联动,打造S级手游
- MySQL 确定哪些是叶节点、分子节点、根节点
- vue父组件往子组件传值时报错Property or method 选择操作人 is not defined on the instance but referenced during rende
- 软件开发需求分析究竟应该由谁来做
- Visual Studio 2015简体中文版
- 搭建个人的Leanote云笔记本
- php字典遍历,OC中的遍历数组和字典
- terminate called after throwing an instance of 'std::cad_alloc' what():std::bad_alloc