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. 【RocketMQ源码学习】- 5. 消息存储机制

    前言 面试官:你了解RocketMQ是如何存储消息的吗?我:额,,,你等下,我看下这篇文字, (逃 由于这部分内容优点多,所以请哥哥姐姐们自备茶水,欢迎留言! RocketMQ存储设计是高可用和高性能 ...

  2. Selenium+Java（一）Selenium基础环境配置

    前言 Selenium在Java中是以Jar包的形式存在,如要使用Java编写Selenium自动化测试用例,需要导入Jar包. selenium需要的Jar包下载地址: http://seleniu ...

  3. 内核升级在线安装报错：Could not retrieve mirrorlist http://mirrors.elrepo.org/mirrors-elrepo-kernel.el7 error was14: curl#6 - "Could not resolve host: mirrors.elrepo.org; 未知的错误"

    修改网卡配置 [root@localhost ~]# vim /etc/sysconfig/network-scripts/ifcfg-ens32 BOOTPROTO="none" ...

  4. Python开发-实现Excel套打打印

    一.目的 目前本人就职与甲方的工作,由于公司的ERP比较烂无法完美的设计套打,就想着自己用Python开发一个套打工具. 二.开发过程 刚开始我打算用Html的方式生成打印的文档,但是有两个无法解决的 ...

  5. day20191106

    笔记: 一.#{}和${}的区别是什么 1)#{}是预编译处理,${}是字符串替换.2)Mybatis 在处理#{}时,会将 sql 中的#{}替换为?号,调用 PreparedStatement 的 ...

  6. HTML 表格 各标签使用的标准顺序（心得）

    <table>   <caption>标题</caption>     <colground>     <col>     <col& ...

  7. dicom 影像通信（scu、scp）的c-echo、c-store、c-find、c-move

    本文主要描述,dicom通信的scu,scp的c-echo.c-store.c-find.c-move的使用. DicomServiceIDicomServiceProviderIDicomCStor ...

  8. HIT2019视听觉信号处理视觉实验一

    写在前面 HIT大三上学期视听觉信号处理课程中视觉部分的实验一,经过和学长们实验的对比发现每一级实验要求都不一样,因此这里标明了是2019年秋季学期的视觉实验一. 由于时间紧张,代码没有进行任何优化, ...

  9. Git 如何优雅地回退代码

    前言 从接触编程就开始使用 Git 进行代码管理,先是自己玩 Github,又在工作中使用 Gitlab,虽然使用时间挺长,可是也只进行一些常用操作,如推拉代码.提交.合并等,更复杂的操作没有使用过, ...

  10. C 基础数据类型 性能测试

    简单测试了C语言中分别使用16位整数和32位整数实现的定点数和内建浮点数的乘除性能: 在release 下 循环 1 0000 0000 * 20次 的时间: CPU:7700K/4.2Ghz 定点数 ...