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. 什么是PHP Socket？

    什么是 Socket? Socket 的中文翻译过来就是“套接字”.套接字是什么,我们先来看看它的英文含义:插座. Socket 就像一个电话插座,负责连通两端的电话,进行点对点通信,让电话可以进行通 ...

  2. Redis集群同步问题

    之前被面试官问到:Redis集群中主从数据同步是从库异步读取主库,那么Redis集群其他主与主之间的数据是怎么共享的呢?或者说是怎么同步的? emmmm……当时我就懵逼了,这不是考试范围啊卧槽~只能老 ...

  3. 2019-9-11：渗透测试，基础学习,ubuntu搭建LAMP

    一,apache web服务器安装 1,sudo apt-get install apache2 2,systemctl status apache2,检查apache2是否开启 #开启.关闭和重启a ...

  4. 【集训Day2】字符串

    字符串(string) [问题描述] 给一个字符串T,问在字符串T 中可以包含最多多少个不重叠的字符串S. 字符串中的每个字符为小写或者大写字母. [输入格式] 第一行输入一个字符串S. 第二行输入一 ...

  5. 05-kubernetes Pod控制器应用进阶

    目录 Pod 资源 标签 给资源打标签 标签选择器 Pod 生命周期 实际操作 livenessProbe 实战 livenessProbe exec 测试 livenessProbe httpGet ...

  6. rug

    rug()函数 :给图添加rug representation. · 一维的 · rug的方式是补充,仅仅包括落在图像区域内的x的值,丢失掉任何有限的值,将会被警告:而丢失任何非有限的值,则静静地丢失 ...

  7. Solr搜索引擎【索引管理】

    一.索引存储 当文档提交到索引之后,directory目录组件会将它们写入到持久化存储器.Solr的目录组件具有以下重要特点: 1.隐藏持久存储的读写细节,例如,将文档写入到磁盘或通过JDBC在数据库 ...

  8. CSRF的原理与防御 | 你想不想来一次CSRF攻击？

    CSRF是Cross Site Request Forgery的缩写,中文翻译过来是跨站请求伪造.这个漏洞往往能给用户带来巨大的损失,CSRF在等保安全检测中,也是一个非常重要的检测项.但是在我们的网 ...

  9. AI如何驱动软件开发？华为云DevCloud 权威专家邀你探讨

    近期,国际著名咨询公司Gartner 在一份研究报告中将 "AI-Driven Development" 列为 2019 年的 Top 10 Strategic Technolog ...

  10. 关于软件定义IT基础设施的未来，深信服是这么思考的

    在今年的深信服创新大会上,软件定义IT基础设施成为非常重要的议题之一,深信服与2,000余位客户的CIO和合作伙伴一起围绕IT基础设施在数字化时代中的作用与价值进行了深入的探讨. 此外,深信服还联合I ...