Html5 生成个玫瑰线图案
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
这个是网友 Vincent 所写的Html5的一些图案。邀请了他写的利用最新html5 容器绘图功能创立的。呵呵,他很快就写了记录下来了。于是,我把他的源码和图案都放在这里。用来体现一些这些绘图功能。看起来也很不错。
在数学书上,玫瑰线的极坐标公式定义为p=a*sin(n*angle);或者p=a*cos(n*angle)
我们借用了这种公式,但是在输入角度的时候作了一些调整,就会产生这种变化。
玫瑰线的历史,也可以追溯到航海时代。
参考资料如下
http://baike.baidu.com/view/301886.htm?fr=ala0_1_1
玫瑰线方面的数学可以参考如下网址获取更多这方面的了解
http://xuxzmail.blog.163.com/blog/static/251319162009739563225/
感谢:Vincent 提供的图案和源码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
- transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>title</title>
- <meta name="author" content="" />
- <meta name="keywords" content="" />
- <meta name="description" content="" />
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <mce:style type="text/css"><!--
- #can {background-color:#ece9d8;}
- --></mce:style><style type="text/css" mce_bogus="1">#can {background-color:#ece9d8;}</style>
- </head>
- <body>
- <canvas id="can" width="500" height="500"></canvas>
- <mce:script type="text/javascript"><!--
- var canvas = document.getElementById("can");
- var ctx = canvas.getContext("2d");
- var _x = 250, _y = 200;
- ctx.beginPath();
- ctx.shadowOffsetX = 1;
- ctx.shadowOffsetY = 1;
- ctx.shadowBlur = 4;
- ctx.shadowColor = 'rgba(255, 255, 255, 1)';
- ctx.strokeStyle = "#000";
- ctx.lineWidth = 1;
- for (i = 0; i <= 360; i++)
- {
- var point0 = getPoint(i - 1);
- var point = getPoint(i);
- ctx.moveTo(_x + point0[0], _y + point0[1]);
- ctx.lineTo(_x + point[0], _y + point[1]);
- }
- ctx.stroke();
- function getPoint(i){
- var len = 200 * Math.sin(5 * i );
- return [parseInt(len * Math.cos(i)), parseInt(len * Math.sin(i))];
- }
- // --></mce:script>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>title</title><meta name="author" content="" /><meta name="keywords" content="" /><meta name="description" content="" /><meta http-equiv="content-type" content="text/html; charset=utf-8" /><mce:style type="text/css"><!--#can {background-color:#ece9d8;}--></mce:style><style type="text/css" mce_bogus="1">#can {background-color:#ece9d8;}</style></head><body><canvas id="can" width="500" height="500"></canvas><mce:script type="text/javascript"><!--var canvas = document.getElementById("can");var ctx = canvas.getContext("2d");var _x = 250, _y = 200;ctx.beginPath();ctx.shadowOffsetX = 1;ctx.shadowOffsetY = 1;ctx.shadowBlur = 4;ctx.shadowColor = 'rgba(255, 255, 255, 1)';ctx.strokeStyle = "#000";ctx.lineWidth = 1;for (i = 0; i <= 360; i++){ var point0 = getPoint(i - 1); var point = getPoint(i); ctx.moveTo(_x + point0[0], _y + point0[1]); ctx.lineTo(_x + point[0], _y + point[1]);}ctx.stroke();function getPoint(i){ var len = 200 * Math.sin(5 * i ); return [parseInt(len * Math.cos(i)), parseInt(len * Math.sin(i))];}// --></mce:script></body></html>
给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
Html5 生成个玫瑰线图案相关推荐
- Html5:生成个玫瑰线图案
这个是网友 Vincent 所写的Html5的一些图案.邀请了他写的利用最新html5 容器绘图功能创立的.呵呵,他很快就写了记录下来了.于是,我把他的源码和图案都放在这里.用来体现一些这些绘图功能. ...
- php柱状图html代码,html5生成柱状图(条形图)效果的实例代码
下面小编就为大家分享一篇html5生成柱状图(条形图)效果的实例代码.小编觉得挺不错的,现在分享给大家,也给大家一个参考.一起跟随小编过来看看吧 XML/HTML Code复制内容到剪贴板 (func ...
- html5柱状图模板,html5生成柱状图(条形图)
(function (){ window.addEventListener("load", function(){ var data = [1000,1300,2000,3000, ...
- 使用visio如何快速生成一个网格状图案,文档技巧!
如何使用visio如何快速生成一个网格状图案 我的成果图: 操作步骤如下: 1.新建一个visio文件,选择"基本框图".点击创建. 2.从左侧形状窗口中基本形状中选中正方形拖动到 ...
- 自定义生成springboot启动图案
自定义生成springboot启动图案 生成字符字母地址: 地址1:http://patorjk.com/software/taag/ 地址2:http://www.network-science.d ...
- html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
- 【文本】HTML5 Canvas渐变色、图案填充文本
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
- 如何在html中自动生成条形图,html5生成柱状图(条形图)效果的实例代码
XML/HTML Code复制内容到剪贴板 (function (){ window.addEventListener("load", function(){ var data = ...
- txt文件中生成立体字或图案网站
地址:http://patorjk.com/software/taag/
最新文章
- 心酸科研路:3年前CVPR论文,仅被引用11次,如今成就黑洞照片!
- Intellij idea高效使用教程
- 城联数据TSM技术方案起底
- ibatis mysql 配置文件详解_MyBatis Generator 配置文件详解
- python bottle框架 重定向_Python的web框架bottle静态文件的路径
- 工作169:删除操作
- hdu 3944 DP? (Lucas 定理)
- Linux 命令(46)—— read 命令(builtin)
- 最新型号设备信息对照表_高利洁中央空调风管清洗设备:K11三维度清扫除尘一体机器人...
- Exchange server 2007启用 设置pop3
- java过滤器验证app用户token_SpringCloud笔记之Zuul过滤器PreFilter实现token校验(简单样例)...
- 推荐一个管理微信好友及微信群的微信机器人管理软件
- [1-5] 把时间当做朋友(李笑来)Chapter 5 【小心所谓成功学】 摘录
- 推荐:为开发者提供直接可用的api
- 《重构--改善既有代码的设计》--代码的坏味道(3)
- 在 Windows10 系统中安装 Homestead 本地开发环境
- 家庭教育机构如何线上线下灵活结合?
- SpringBoot教程(十一)——将Bean放入Spring容器中的五种方式
- js - JavaScript
- Python爬虫豆瓣电影top250