考虑如下的曲线方程：

R=S*sqrt(n)

α=n*θ

X=R*SIN(α)

Y=R*COS(α)

其中，S和θ可指定某一个定值。对n循环取0~999共1000个值，对于每个n，按照给定的坐标方程，求得一个坐标值(x,y)，然后以（x,y）为圆心绘制一个半径为6的圆，可以得到一个螺旋状的图形。

编写如下的HTML代码。

<html>

<head>

<title>衍生的圆点</title>

</head>

<body>

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

</canvas>

<script>

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

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

var scale = 10;

var theta = 30;

for (n=0;n<1000;n++)

{

var radius = scale * Math.sqrt(n);

var angle = n * theta * (Math.PI / 180);

var x = radius * Math.cos(angle) + canvas.width / 2;

var y = radius * Math.sin(angle) + canvas.height / 2;

ctx.beginPath();

ctx.arc(x, y, 6, 0, Math.PI * 2);

ctx.fillStyle ='rgba(255,50,50,0.9)';

ctx.fill();

}

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图1所示的图案。

图1  scale = 10，theta = 30时绘制的图案

若将上面程序中的语句“var theta = 30; ”改写为“var theta =60; ”，其余部分保持不变，则在画布中绘制出如图2所示的图案。

图2  scale = 10，theta = 60时绘制的图案

在程序中，theta代表每个小圆圆心相对于上一个小圆圆心的偏移角度。一个圆周360°，因此当theta = 30时，会绘制出360/30=12条放射状的线，如图1所示；当theta =60时，会绘制出360/60=6条放射状的线，如图2所示。

若将上面程序中的语句“var theta = 30; ”改写为“var theta =110; ”，其余部分保持不变，则在画布中绘制出如图3所示的图案。

图3  scale = 10，theta =110时绘制的图案

若再将程序中的语句“var scale = 10; ”改写为“var scale =6; ”，则在画布中绘制出如图4所示的图案。

图4  scale = 6，theta =110时绘制的图案

若将程序中的语句“var scale = 10; ”改写为“var scale =15; ”，则在画布中绘制出如图5所示的图案。

图5  scale = 15，theta =110时绘制的图案

对比图3、4、5可知，scale的值可以可知各小圆的疏密程度。

将上面程序中1000个小圆的绘制过程动态展示出来，编写如下的HTML文件。

<html>

<head>

<title>衍生的圆点</title>

</head>

<body>

<canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;background:black;">

</canvas>

<script>

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

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

var hue = 0;

var scale = 10;

var n = 0;

var theta = 30;

function draw()

{

var radius = scale * Math.sqrt(n);

var angle = n * theta * (Math.PI / 180);

var x = radius * Math.cos(angle) + canvas.width / 2;

var y = radius * Math.sin(angle) + canvas.height / 2;

hue++;

if (hue >= 360)  hue = 0;

ctx.beginPath();

ctx.arc(x, y, 6, 0, Math.PI * 2);

ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;

ctx.fill();

n++;

if (n>=1000)

{

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

n=0;

}

}

setInterval("draw()",20);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图6所示的动画效果。

图6  scale = 10，theta = 30时圆点衍生效果

更改scale和theta的值，会产生不同的圆点衍生效果。例如，修改scale=12，theta=137.5，则在浏览器窗口中呈现出如图7所示的动画效果。

图7  scale = 12，theta = 137.5时圆点衍生效果

更进一步，我们将上面程序中的控制圆点疏密程度的参数scale和每次迭代偏移角度theta采用随机数的方式确定其值。编写如下的HTML代码。

<html>

<head>

<title>衍生的圆点</title>

</head>

<body>

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

<script>

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

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

var hue = 0;

var scale = 12;

var n = 0;

var theta = 137.5;

function rand(min,max)

{

return Math.floor(Math.random()*(max-min)+min)+(Math.random()>0.5?0.5:0);

}

function draw()

{

var radius = scale * Math.sqrt(n);

var angle = n * theta * (Math.PI / 180);

var x = radius * Math.cos(angle) + canvas.width / 2;

var y = radius * Math.sin(angle) + canvas.height / 2;

hue++;

if (hue >= 360)  hue = 0;

ctx.beginPath();

ctx.arc(x, y, 6, 0, Math.PI * 2);

ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;

ctx.fill();

n++;

if (n>=500)

{

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

scale=rand(6,15);

theta=rand(20,170);

n=0;

}

}

setInterval("draw()",20);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图8所示的动画效果。

图8   圆点的衍生动画特效

JavaScript动画实例：圆点的衍生的更多相关文章

  1. JavaScript动画实例：李萨如曲线

    在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...

  2. JavaScript动画实例：递归分形图动态展示

    在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...

  3. JavaScript动画实例：曲线的绘制

    在“JavaScript图形实例:曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例.这些曲线都是根据其曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出 ...

  4. JavaScript动画实例：旋转的圆球

    1．绕椭圆轨道旋转的圆球 在Canvas画布中绘制一个椭圆,然后在椭圆上绘制一个用绿色填充的实心圆.之后每隔0.1秒刷新,重新绘制椭圆和实心圆,重新绘制时,实心圆的圆心坐标发生变化,但圆心坐标仍然位于 ...

  5. JavaScript动画实例：动感小球

    已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ)     (0≤θ≤2π) 将0~2π区间等分48段,即设定间隔dig的值为π/24.θ初始值从0开始,按曲线方程求得坐标值(x,y), ...

  6. JavaScript动画实例：旋转的正三角形

    给定一个正三角形的重心坐标为(x0,y0),高为h,可以用如下的语句绘制一个底边水平的正三角形. ctx.beginPath(); ctx.moveTo(x0,y0-h*2/3); ctx.lineT ...

  7. JavaScript动画实例：沿五角星形线摆动的小圆

    五角星形线的笛卡尔坐标方程式可设为: r=10+(3*sin(θ*2.5))^2  x=r*cos(θ) y=r*sin(θ)              (0≤θ≤2π) 根据这个曲线方程,在[0,2 ...

  8. JavaScript动画实例：炸开的小球

    1．炸开的小球 定义一个小球对象类Ball,它有6个属性:圆心坐标(x,y).小球半径radius.填充颜色color.圆心坐标水平方向的变化量speedX.圆心坐标垂直方向的变化量speedY. B ...

  9. JavaScript动画实例：螺旋线

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

随机推荐

  1. 阿里云服务器ecs配置之安装jdk（转）

    一.安装环境 操作系统:Centos 7.4 JDK版本:1.8 工具:Xshell5.Xftp5 二.安装步骤 第一步:下载安装包 (官网)链接: 下载适合自己系统的jdk版本,如图:我下载的是64 ...

  2. day29 继承

    目录 一.property装饰器 应用场景1 应用场景2 应用场景3(场景2优化) 二.继承介绍 1 语法 2 属性查找 3 继承的实现原理 3.1 菱形问题 3.2 继承原理 3.3 深度优先和广度 ...

  3. mysql 存储引擎的选择

    MyISAM:如果应用是以读操作和插入操作为主,只有很少的更新和删除操作,并且对事务的完整性.并发性要求不是很高,选择这个存储引擎非常合适.MyISAM在Web.数据仓储和其他应用环境下最常使用的存储 ...

  4. Python3笔记027 - 6.2 参数传递

    第6章 函数 6.2 参数传递 在理解形参和实参的基础上,理解位置参数.关键字参数.可变参数这三种情形,以及这三种的混合情形. 6.2.1 形式参数和实际参数 形式参数:在定义函数时,函数名后面括号中 ...

  5. 数据可视化之powerBI技巧（二十三）Power BI可视化技巧，使用DAX自定义时间轴

    ​按照自然日历来展现疫情数据时,是这样的效果, 由于各个国家的疫情爆发时间不一致,按自然日期坐标轴很难比较各个国家的蔓延速度. 如果各个国家都从蔓延日开始统计,展示之后每日的确诊人数,就是同样的时间轴 ...

  6. 网页排名算法PagaRank

    网页排名算法PageRank PageRank,网页排名,又叫做网页级别.是一种利用网页之间的超链接数据进行计算的方法.它是由Google的两位创始人提出的. 对于用户而言,网页排名一般是比较主观的, ...

  7. git只操作某个文件夹

    在我们的工作中,可能会有这样的情况发生:我只想提交某一个文件夹,而另外的文件夹我并不想提交. 遇到上述情况,我们再git中这样解决: 1.查看某个文件夹的状态(这里我用log文件夹做实验). 我们可以 ...

  8. 什么是控制反转(IoC)？什么是依赖注入（DI）？以及实现原理

    ​ IoC不是一种技术,只是一种思想,一个重要的面向对象编程的法则,它能指导我们如何设计出松耦合.更优良的程序.传统应用程序都是由我们在类内部主动创建依赖对象,从而导致类与类之间高耦合,难于测试:有了 ...

  9. 围绕一个 volatile 关键字居然可以问出来 16 个问题

    对于 Java 每次面试就会想到多线程,多线程问题基本跑不了要问一下 volalite 关键字,可是我万万没想到居然一个 volatile 关键字可以连续问题出来 16 个问题!看下你能回答出来几个? ...

  10. 目前解决移动端1px边框最好的方法

    在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...