考虑如下的曲线方程:

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动画实例:旋转的圆球

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

  3. RequestAnimationFrame更好的实现Javascript动画

    一直以来,JavaScript的动画都是通过定时器和间隔来实现的.虽然使用CSS transitions 和 animations使Web开发实现动画更加方便,但多年来以JavaScript为基础来实 ...

  4. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  5. javascript动画系列第三篇——碰撞检测

    前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...

  6. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  7. JavaScript动画知多少?

    今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...

  8. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  9. Javascript动画效果(一)

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  10. Javascript动画效果(二)

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

随机推荐

  1. 数字转IP地址函数

    --------------------------------------------------------------------- -- Author : htl258(Tony) -- Da ...

  2. 第二章 深入 C# 数据类型

    第二章 深入 C# 数据类型 1.封装又称信息隐藏,是指利用抽象数据类型将数据和数据的操作结合在一起,使其构成一个不可分割的独立实体,尽可能的隐藏内部的细节,只保留一些对外接口,使之于外部发生联系. ...

  3. 【整理】 JavaScript模块化规范AMD 和 CMD 的区别有哪些?

    根据玉伯等人在知乎上的回答整理.整理中... AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD CMD 规范在这里:https://githu ...

  4. Autodesk Vault: 获取授权失败

    在登录Vault Explorer时弹出对话框,获取授权失败,不能登录. 1.首先Autodesk Vault Professional采用网络版授权方式,在安装之前之前你需要首先配置网络授权服务器, ...

  5. 从PHPCMS、帝国CMS谈站长如何选择适合自己的CMS

    经常见站长论坛有人提到选哪个CMS好,最近也又有朋友在51LA站长群里问到PHPCMS和帝国CMS比较选哪个好的问题,所以落叶今天从PHPCMS及帝国CMS对比的角度来谈谈站长应该如何选择适合自己的C ...

  6. Oracle常用查看表结构命令

    获取表: select table_name from user_tables; //当前用户的表 select table_name from all_tables; //所有用户的表 select ...

  7. 枚举与剪枝_观察算式(比标准答案还要牛B)

    观察算式 观察以下的算式: △△△ * △△ = △△△△ 某3位数乘以2位数,结果为4位数 要求:在9个△所代表的数字中.1~9的数字恰好每一个出现1次. 暴力破解代码: package lianx ...

  8. dockerfile语法规则

    编写Dockerfile 在前面的章节,我们学习了通过docker命令来下载镜像,运行镜像,在容器中部署自己的程序,最后将容器提交到自己的镜像中.但是,这并不是Docker推荐的镜像构建方式.在这一章 ...

  9. 编译原理子cygwin的使用

    目的:熟悉cygwin环境的使用,学习使用lex写简单的词法分析程序,会在cygwin环境下使用flex调试lex写的程序 内容:使用cygwin下的flex工具将exam1.l和exam2.l编译并 ...

  10. AI caffe

    caffe,是一个深度学习框架. Blob 存储数据. 批量图像数据(n, k, h, w):图像数量,图像通道,图像高度,图像宽度. data:值 diff:梯度 Layer data_layers ...