Html5:生成个玫瑰线图案
2010-07-16 11:22
218 查看
这个是网友 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>
相关文章推荐
- Html5:生成个玫瑰线图案
- Html5:生成个玫瑰线图案
- C#小练习笔记:生成个玫瑰线图案
- C#小练习笔记:生成个玫瑰线图案
- HTML5生成玫瑰线图案
- HTML5 SVG生成图案背景样式的js插件
- C#小练习笔记:生成个玫瑰线图案
- HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
- 16个HTML5 框架、模板以及生成工具
- html5使用TexturePacker生成的SpriteSheet
- HTML5利用canvas绘制太极图案
- Html5固定链接生成二维码的技巧
- 用html5开发随机生成的大树的代码
- cocos2d-js html5自定义鼠标图案及设置原点方法
- html5的页面生成标签
- Sublime Text 3如何快速生成HTML5的头部信息和常用的快捷键
- js+html5实现canvas绘制圆形图案的方法
- 基于html5绘制圆形多角图案
- html5 new FileReader()生成图片
- html5 实现网页截屏 页面生成图片(源代码)