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. Spring中的事务回滚机制

    初学者笔记 问题:在Java项目汇中,添加@Transactional注解,报错之后,事务回滚未生效,数据仍插入数据库中.经查看报错位置位于新增成功之后.空指针异常. 一.特性 先了解一下@Trans ...

  2. python 安装resquest

    本文链接:https://blog.csdn.net/charlotte1516/article/details/91991848 搬运是为了怕原链接失效,建议浏览原链接. 1.首先在开始栏搜索cmd ...

  3. 题解 P1226 【【模板】快速幂||取余运算】

    1.题目分析 原题 本题在于快速幂的使用,以及对long long的应用问题. 2.解题思路 快速幂 求幂常见用法: int pow(int a,int b) { int ans; for(int i ...

  4. c#-EntitySet<TEntity>

    MSDN 解释: https://msdn.microsoft.com/zh-cn/library/bb341748.aspx 为 LINQ to SQL 应用程序中的一对多关系和一对一关系的集合方提 ...

  5. Django的settings文件部分源码分析

    Django的settings文件部分源码分析 在编写Django项目的过程中, 其中一个非常强大的功能就是我们可以在settings文件配置许多选项来完成我们预期的功能, 并且这些配置还必须大写, ...

  6. 2019-2020-5 20199317《Linux内核原理与分析》第五周作业

    第4章 系统调用的三层机制(上) 1  用户态.内核态和中断 大多数程序员在写程序时很难离开系统调用,与系统调用打交道的方式是通过库函数的方式,库函数用来把系统调用给封装起来. 计算机的硬件资源是有限 ...

  7. 微信小程序——详细讲解页面传值(多种方法)

    1.使用navigator的url带参传值 (1)在pageA页面有一个固定的值要传递到pageB页面,比如说一个固定的值user_id要传递给B <navigator url=".. ...

  8. 全新一代云服务器S6，重新定义性价比

    S6通用计算型云服务器,搭载全新一代处理器,配套华为自研高性能智能网卡,计算与网络性能全面升级.S6进一步强化高性价比定位,满足企业性能要求的同时,降低中小企业上云成本. 更多详情请访问ECS产品介绍 ...

  9. C# 自然周，月，季度计算。

    /// <summary> /// 判断时间是否和服务器时间是一天 /// </summary> /// <param name="cs">&l ...

  10. luogu P4677 山区建小学 |dp

    题目描述 政府在某山区修建了一条道路,恰好穿越总共nnn个村庄的每个村庄一次,没有回路或交叉,任意两个村庄只能通过这条路来往.已知任意两个相邻的村庄之间的距离为did_idi​(为正整数),其中,0& ...