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. 小白学 Python 爬虫（7）：HTTP 基础

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  2. HTTPS 原理分析——带着疑问层层深入

    HTTPS 随着 HTTPS 建站的成本下降,现在大部分的网站都已经开始用上 HTTPS 协议.大家都知道 HTTPS 比 HTTP 安全,也听说过与 HTTPS 协议相关的概念有 SSL .非对称加 ...

  3. 【2018寒假集训 Day2】【动态规划】回文字

    回文字(palin) 问题描述: 如果一个单词从前和从后读都是一样的,则称为回文字.如果一个单词不是回文字,则可以把它拆分成若干个回文字.编程求一个给定的字母序列,最多要分割成几部分,使每一部分都回文 ...

  4. JavaScript-----3.变量

    1.变量的使用 变量在使用的时候分两步:1. 声明变量 2. 赋值 1.1声明变量 //声明变量 var age;//声明一个名字为age的变量 var是JS的一个关键字,用于声明变量,使用该关键字声 ...

  5. 【JAVA - 基础】之String存储机制浅析

    本文主要解决以下几个问题 String源码解析? String和new String的区别? String通过"+"或concat累加时的对象创建机制? StringBuilder ...

  6. 如何提高 PHP 代码的质量？第二部分 单元测试

    在“如何提高 PHP 代码的质量?”的前一部分中:我们设置了一些自动化工具来自动检查我们的代码.这很有帮助,但关于我们的代码如何满足业务需求并没有给我们留下任何印象.我们现在需要创建特定代码域的测试. ...

  7. plot()与dev 函数族的使用

    1. plot()的类型选择 plot()函数,属于graphics包中. plot(a,b,type="value") type:以什么样的形式来画a,b之间的关系: ·&quo ...

  8. android java socket断线重连

    android java socket断线重连 thread = new Thread(new Runnable() { @Override public void run() { while (tr ...

  9. vue基本开发环境搭建

    先安装node运行环境下载网址 https://nodejs.org/en/或者http://nodejs.cn/ 检查node是否安装成功命令行窗口直接输入 $ node -v 如果输出版本号,说明 ...

  10. Composer安装和使用

    Composer 是 PHP 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们.Composer 不是一个包管理器.是的,它涉及 "packages" ...