1．线团图案

设立坐标计算公式为：

X=R1*COS(3α)+R2*COS(14α)）

Y=R1*SIN(3α)+R2 *SIN(14α)）

再用循环依次取α值为0~2π（每次增量为0.01），计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个封闭曲线图形，可得到一个线团图案。

编写如下的HTML代码。

<!DOCTYPE>

<html>

<head>

<title>线团</title>

</head>

<body>

<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

function draw() {

context.beginPath();

for (i = 0; i < 2 * Math.PI; i = i + 0.01) {

var x = 200 + (80 * Math.cos(3 * i) + 40 * Math.cos(14* i));

var y = 150 + (80 * Math.sin(3 * i) + 40 * Math.sin(14* i));

if (i==0)

context.moveTo(x,y);

else

context.lineTo(x, y);

}

context.closePath();

context.lineWidth=2;

context.strokeStyle = "purple";

context.stroke();

}

draw();

</script>

</body>

</html>

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

图1  线团图案

2．七彩线团

我们可以将线团图案绘制过程进行动态展示，编写HTML文件如下。

<!DOCTYPE>

<html>

<head>

<title>七彩线团</title>

<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var i=0, t = 0;

var colors=new Array('red','orange','yellow','green','cyan','blue','purple');

function draw() {

var x = 200 + 90 * Math.cos(3 * i) + 45 * Math.cos(14 * i);

var y = 150 + 90 * Math.sin(3 * i) + 45 * Math.sin(14 * i);

i=i+0.01;

if (i>=2*Math.PI) {

context.clearRect(0,0,canvas.width,canvas.height);

i=0;

}

t = t + 1;

if (t > 6)  t = 0;

context.beginPath();

context.arc(x, y, 3, 0, 2 * Math.PI);

context.fillStyle = colors[t];

context.fill();

}

window.setInterval('draw()', 20);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中看到七彩线团图案的动态绘制过程，如图2所示。

图2  七彩线团图案的动态绘制

JavaScript图形实例：七彩线团的更多相关文章

  1. JavaScript图形实例：线段构图

    在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...

  2. JavaScript图形实例：再谈IFS生成图形

    在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...

  3. JavaScript图形实例：随机SierPinski三角形

    在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...

  4. JavaScript图形实例：图形的旋转变换

    旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P( ...

  5. JavaScript图形实例：合成花卉图

    我们知道在直角坐标系中,圆的方程可描述为: X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个圆.编写 ...

  6. JavaScript图形实例：四瓣花型图案

    设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描 ...

  7. JavaScript图形实例：图形的扇形变换和环形变换

    1.1  扇形变换 将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换. 设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2),长方形的长为X,扇形圆心坐标为 ...

  8. JavaScript图形实例：圆内螺线

    数学中有各式各样富含诗意的曲线,螺旋线就是其中比较特别的一类.螺旋线这个名词来源于希腊文,它的原意是“旋卷”或“缠卷”.例如,平面螺旋线便是以一个固定点开始向外逐圈旋绕而形成的曲线. 阿基米德螺线和黄 ...

  9. JavaScript图形实例：正弦曲线

    正弦曲线的坐标方程为: Y=A*SIN(X)    (A为振幅) 1．正弦曲线 在弧度为0~4π的正弦曲线上取360个点,将这些点用线连接起来,可以绘制出正弦曲线.编写如下的HTML代码. <! ...

随机推荐

  1. Linux下使用Nginx做CDN服务器下的配置

    由于使用docker配置Nginx比较方便,所以博主就使用docker做为容器配置下 第一步.配置docker-compose.yml文件 version: services: nginx: rest ...

  2. All-in-one 的Serving分析

    export_func.export(model, sess, signature_name=mission, version=fold + 1) def export(model, sess, si ...

  3. 【数据结构】之队列（Java语言描述）

    在[这篇文章]中,我简单介绍了队列的基本数据结构及操作方式,并用C语言代码描述了队列的基本功能实现. JDK中默认为我们提供了队列的API—— Queue . Queue是一个接口,其中提供了处理队列 ...

  4. Centos 6、7 禁止密码验证登陆

    Centos 6.7 禁止密码验证登陆 安全方面的考虑,秘钥对验证登陆相对密码验证要更安全 修改 /etc/ssh/sshd_config 配置文件 该配置文件中,只需要修改一个参数 Password ...

  5. MySql简单的增删改查语句 js

    最近在项目中需要连接数据库,做增删改查的功能,sql语句整理做了以下记录(基于NodeJs,注:data为你的真实数据): (一)新增插入表中数据: sql: 'insert into work(表名 ...

  6. expect脚本同步文件、expect脚本指定host和要同步的文件、构建文件分发系统、批量远程执行命令

    7月20日任务 20.31 expect脚本同步文件20.32 expect脚本指定host和要同步的文件20.33 构建文件分发系统20.34 批量远程执行命令扩展:shell多线程 http:// ...

  7. 如何解决jpa 要求column 名称单词必须用下划线

    [转]:http://www.jeesns.cn/article/detail/6657 先引出轮子http://blog.csdn.net/54powerman/article/details/76 ...

  8. 【解决】error pulling image configuration: Get https:// ...... x509: certificate has expired or is not yet valid

    [问题]进行镜像拉取时报错 [分析] 很多人会被第一句所蒙蔽,按照网上教程进行修改etc/sysconfig/docker,之后发现还是没有用. 其实这里重点是最后一句"certificat ...

  9. 嵌入式—ASCII码

    为了可以在计算机保存他们的文字,他们决定采用 127号之后的空位来表示这些新的字母.符号,还加入了很多画表格时需要用下到的横线.竖线.交叉等形状,一直把序号编到了最后一个状态255.从128 到255 ...

  10. （重点）Python深入之Python内存管理机制你会吗？

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:醍醐三叶 请注意:如果你平时学Python遇到问题找不到人解答?或者没有 ...