HTML5 Canvas实现玫瑰曲线和心形图案的代码实例


Posted in HTML / CSS onApril 10, 2014

效果图:
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例 

HTML5 Canvas实现玫瑰曲线和心形图案的代码实例

提示:把代码复制到一个html文件中并保存,直接打开即可看到效果。

实现代码:
 

 

<!DOCTYPE html>
<html>
<head>
<meta charset = "gbk">
<title>HTML5 Demo</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:120px;
height:300px;
z-index:1;
left: 840px;
top: 80px;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. </canvas> 
<div id="apDiv1">
<form>
玫瑰曲线方程:<br>
r=a+bsin(m/n*x)<br><br>
选择参数:<br><br>
m: <input type="number" name="m" min="2" max="29" value="29"/><br><br>
n: <input type="number" name="n" min="1" max="12" value="11"/><br><br>
a: <input type="number" name="a" min="0" max="5" value="1"/><br><br>
b: <input type="number" name="b" min="1" max="7" value="5"/><br><br>
<input type="button" value=" 画 图 " onClick="draw();"><br><br>
<hr><br>
<input type="button" value=" 画 图 2 " onClick="draw2();"><br><br>
<hr><br>
<input type="button" value=" 心形图 " onClick="draw3();"><br>
</form>
</div>
<script type="text/javascript"> 
function draw() { 
var ctx = document.getElementById('canvas').getContext('2d'); 
ctx.save(); 
ctx.translate(400,300); 
ctx.clearRect(-400,-300,800,600);
ctx.strokeStyle = "#cc0000"; 
var a = 0, b = 1, m = 6, n = 1;
m = document.forms[0].m.value;
n = document.forms[0].n.value;
a = document.forms[0].a.value; 
b = document.forms[0].b.value; 
drawRose(ctx,a,b,m,n); 
ctx.restore(); 
} 
function drawRose(ctx,a,b,m,n){ 
ctx.beginPath(); 
var e = 0, c = 120; 
var k = 2 * Math.PI / 360;
do { 
var r = a/b + Math.sin( m * e / n * k);
r = r * c; 
var x = r * Math.cos( e * k );
var y = r * Math.sin( e * k );
e += 0.1; 
ctx.lineTo(x,y); 
} while ( e <= 4320 ); 
ctx.stroke(); 
} 
function draw2(){ 
var ctx = document.getElementById('canvas').getContext('2d'); 
ctx.save(); 
ctx.translate(400,300); 
ctx.clearRect(-400,-300,800,600);
ctx.strokeStyle = "#cc0000"; 
ctx.beginPath(); //ctx.moveTo(0,0);
var e = 0, c = 150; 
var k = 2 * Math.PI / 360;
do { 
x = 150*Math.cos( 5/2 * e*k ) + 50*Math.cos( 15/16 * 5/2 * e*k ); 
y = 150*Math.sin( 5/2 * e*k ) - 50*Math.sin( 15/16 * 5/2 * e*k ); 
e += 0.1; 
ctx.lineTo(x,y); 
} while ( e <= 3600 ); 
ctx.stroke(); 
ctx.restore();
} 
function draw3(){ 
var ctx = document.getElementById('canvas').getContext('2d'); 
ctx.save(); 
ctx.translate(400,300); 
ctx.clearRect(-400,-300,800,600);
ctx.strokeStyle = "#ff0000"; 
ctx.beginPath(); 
var x = 1, y;
do { 
y = -80*(Math.sqrt(1-x*x) + Math.pow(x*x,1/3)); 
x -= 0.001; 
ctx.lineTo(100*x,y); 
} while ( x >= -1 ); 

do { 
y = 80*(Math.sqrt(1-x*x) - Math.pow(x*x,1/3)); 
x += 0.001; 
ctx.lineTo(100*x,y); 
} while ( x <= 1 );
ctx.closePath(); 

var grad = ctx.createRadialGradient(-40,-60,10,-40,-40,200);
grad.addColorStop(0, "#ffcc00"); 
grad.addColorStop(1, "#ff0000"); 
ctx.fillStyle = grad;
ctx.fill();
// ctx.stroke(); 
ctx.restore();
} 
window.onload = function (){ 
draw();
} 
</script>
</body>
</html>

 

HTML / CSS 相关文章推荐
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 #HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 #HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 #HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 #HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 #HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 #HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 #HTML / CSS
You might like
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
商务助理岗位职责
2013/11/13 职场文书
写自荐信要注意什么
2013/12/26 职场文书
学校七一活动方案
2014/01/19 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
教师自我鉴定范文
2014/03/20 职场文书
培训研修方案
2014/06/06 职场文书
护士实习求职信
2014/06/22 职场文书
婚宴来宾致辞
2015/07/28 职场文书
安全教育主题班会总结
2015/08/14 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书