JavaScript多种图形实现代码实例


Posted in Javascript onJune 28, 2020

1.小星星

设有如下的曲线参数方程:

N=5

x = r*sin(nθ)*cos(θ)

y = r*sin(nθ)*sin(θ) (0≤θ≤2π)

用循环依次取θ值为0~2π(每次增量为π/64),计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个一个5瓣花卉图案。

编写如下的HTML代码。

<!DOCTYPE html>
<head>
<title>小星星</title>
<script type="text/javascript">
 function draw(id)
 {
   var canvas=document.getElementById(id);
   if (canvas==null)
    return false;
   var context=canvas.getContext('2d');
   context.fillStyle="#EEEEFF";
   context.fillRect(0,0,400,300);
   context.strokeStyle="blue";
   context.lineWidth=2;
   context.beginPath();
   var r=120;          // 下面可进行修改的语句 (3)
   var n=5;           // 下面可进行修改的语句 (3)
   for (theta=0;theta<=2*Math.PI;theta+=Math.PI/64)
   {
     b=r*Math.sin(n*theta);  // 下面可进行修改的语句 (3)
     x=200+b*Math.cos(theta);
     y=150+b*Math.sin(theta);
     if (theta==0)
      context.moveTo(x,y);
     else
      context.lineTo(x,y);
   }
   context.stroke();
  }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>

将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出如图1所示的5瓣花卉图案。

JavaScript多种图形实现代码实例

图1 5瓣花卉图案1

我们将上面程序中标识的语句1“var r=120;”修改为“var r=50;”,适当减小初始半径,使得绘制的图案不会超出画布的范围,在将标识的语句3“b=r*Math.sin(n*theta);”修改为“b=r*(1+Math.sin(n*theta)/2);”,则在画布中绘制出如图2所示的5瓣花卉图案。

JavaScript多种图形实现代码实例

图2 5瓣花卉图案2

这个图案比图1中的图案的感觉是中间向外扩展了,使得中心部位出现空白。再次修改语句3为“b=r*(2+Math.sin(n*theta)/2);”,以增大中间部分的空白,则在画布中绘制出如图3所示的图案,像小星星吗?

JavaScript多种图形实现代码实例

图3 小星星图案

上面程序中的n值也可修改,例如在上面绘制小星星图案的程序中,将标识语句2

“var n=5;”修改为“var n=6;”,则在画布中绘制出如图4所示的图案。像六角雪花图案吗?

JavaScript多种图形实现代码实例

图4 六角雪花图案

我们这样想一想,若将n的值修改为一个实数(有小数部分)会这样呢?例如,将

“var n=5;”修改为“n=5.05;”,则在画布中绘制出如图5所示的图案。

JavaScript多种图形实现代码实例

图5 未封闭的小星星图案线

2.环带

由图5知,θ值取0~2π时,正好绘制一圈,由于n取非整数时,曲线不封闭,因此,若取θ值为0~10π,绘制5圈,可得到一个环带图案。为读者引用和下面讲述方便,给出完整HTML文件内容如下。

<!DOCTYPE html>
<head>
<title>环带</title>
<script type="text/javascript">
 function draw(id)
 {
   var canvas=document.getElementById(id);
   if (canvas==null)
    return false;
   var context=canvas.getContext('2d');
   context.fillStyle="#EEEEFF";
   context.fillRect(0,0,400,300);
   context.strokeStyle="red";
   context.lineWidth=2;
   context.beginPath();
   var n=5.05;
   k=10;
   for (theta=0;theta<=k*Math.PI;theta+=Math.PI/120)
   {
    var r=110*(1+Math.cos(n*theta)/5);
    var x =200+ r*Math.cos(theta);
    var y =150+ r*Math.sin(theta);
    if (theta==0)
      context.moveTo(x,y);
    else
      context.lineTo(x,y);
   }
   context.stroke();
  }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制的五角环带,如图6所示。

JavaScript多种图形实现代码实例

图6 五角环带

将上面程序中的n值由“n=5.05”修改为“n=9.05”,则在画布中绘制出如图7所示的环带。

JavaScript多种图形实现代码实例

图7 九角环带

若将上面程序中的n值修改为9.2,且将k值修改为12,则在画布中绘制出如图8所示的圆环带。

JavaScript多种图形实现代码实例

图8 n值为9.2时的圆环

若将上面程序中的n值修改为5.5,且将k值修改为12,则在画布中绘制出如图9所示的圆环。

JavaScript多种图形实现代码实例

图9 n值为5.5时的圆环

在绘制图9的程序中,再将语句“var r=110*(1+Math.cos(n*theta)/5);”修改为

“var r=90*(1+Math.cos(n*theta)/2);”则在画布中绘制出如图10所示的图案。

JavaScript多种图形实现代码实例

图10 n值为5.5时的另一环状图案

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
js 数据类型判断的方法
Dec 03 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 #Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 #Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 #Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 #Javascript
viewer.js实现图片预览功能
Jun 24 #Javascript
Javascript实现鼠标移入方向感知
Jun 24 #Javascript
javascript实现前端input密码输入强度验证
Jun 24 #Javascript
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
模拟xcopy的函数
2006/10/09 PHP
DISCUZ 分页代码
2007/01/02 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
nohup的用法
2014/08/10 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
小学教师自我鉴定
2013/11/07 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
自主招生英文自荐信
2015/03/25 职场文书
文员岗位职责范本
2015/04/16 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS