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中transform变换模型的渲染
May 27 HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
新闻内页-JS分页
2006/06/07 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python关于变量名的基础知识点
2020/03/03 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
公司营业员的自我评价
2014/03/04 职场文书
老公给老婆的保证书
2014/04/28 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
海洋科学专业求职信
2014/08/10 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
银行求职信怎么写
2019/06/20 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
怎么用Python识别手势数字
2021/06/07 Python