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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
Vue+Element实现动态生成新表单并添加验证功能
May 23 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
PHP的explode和implode的使用说明
2011/07/17 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
在python image 中实现安装中文字体
2020/05/16 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
中专自荐信
2013/10/13 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
优秀经理获奖感言
2014/03/04 职场文书
交通事故协议书范文
2014/04/16 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书