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 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 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
Thinkphp中Create方法深入探究
2014/06/16 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
javascript 获取元素样式必杀技
2014/05/04 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python笔记:mysql、redis操作方法
2017/06/28 Python
Python协程的用法和例子详解
2017/09/09 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
简单了解python的内存管理机制
2019/07/08 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python如何给你的程序做性能测试
2020/07/29 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
妇产医师自荐信
2014/01/29 职场文书
企业百日安全活动总结
2015/05/07 职场文书
管辖权异议上诉状
2015/05/23 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
Python面试不修改数组找出重复的数字
2022/05/20 Python