已知圆的坐标方程为:

X=R*SIN(θ)

Y=R*COS(θ)     (0≤θ≤2π)

给定初始坐标位置(X,Y),按照圆的坐标方程,从角度angle = 0开始,每间隔angleSpeed = 0.2求得一个坐标值(x,y),将这个坐标值作为偏移变化量,分别加到初始坐标位置上,即在(X+x,Y+y)处填充字母“A”。填充15个字母后,清除画布,重新从初始坐标位置开始动画过程。

编写如下的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 w2 = Math.floor(canvas.width/ 2);

var h2 = Math.floor(canvas.height/ 2);

var pi2 = Math.PI * 2;

ctx.font = "36px Impact";

ctx.translate(w2, h2);

var char = "A";

var x =0;

var y =0;

var radius = 30;

var angle = 0;

var angleSpeed = 0.2;

var color='rgba(0,255,255,0.9)';

var age = 0;

function animate()

{

ctx.fillStyle=color;

ctx.fillText(char, x, y);

x += Math.cos(angle) * radius;

y += Math.sin(angle) * radius;

angle += angleSpeed;

age++;

if (age >= 15)

{

ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height);

x = 0;

y = 0;

angle = 0;

age=0;

}

}

setInterval('animate()',100);

</script>

</body>

</html>

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

图1  angleSpeed = 0.2的字母运动效果

若将上面程序中的语句“var angleSpeed = 0.2;”改写为“var angleSpeed = 0.45;”,其余部分保持不变,则在浏览器窗口中呈现出如图2所示的动画效果。

图2  angleSpeed = 0.45的字母运动效果

由图1和图2看出,输出的字母“A”看起来沿着一个圆周线,但字母均是朝向正上方,能否让字母朝着圆周线的方向呢?这需要在输出字母的时候适当旋转坐标。将程序中的语句

ctx.fillText(char, x, y);

改写为:

ctx.translate(x, y);

ctx.rotate(angle + pi2 / 4);

ctx.fillText(char, -13,10);

ctx.rotate(-angle-pi2 / 4);

ctx.translate(-x, -y);

其余部分保持不变,则在浏览器窗口中呈现出如图3所示的动画效果。

图3  沿着圆周线运动的字母

由图3看出,字母“A”的运动轨迹是确定的。若在角度angle的变化中加入随机因素会怎样呢?编写如下的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 w2 = Math.floor(canvas.width/ 2);

var h2 = Math.floor(canvas.height/ 2);

var pi2 = Math.PI * 2;

ctx.font = "36px Impact";

ctx.translate(w2, h2);

var char = "A";

var x =0;

var y =0;

var radius = 30;

var angle = pi2*0.05;

var angleSpeed = 0.2;

var color='rgba(0,255,255,0.9)';

var age = 0;

function animate()

{

ctx.fillStyle=color;

ctx.translate(x, y);

ctx.rotate(angle + pi2 / 4);

ctx.fillText(char, -13, 10);

ctx.rotate(-angle-pi2 / 4);

ctx.translate(-x, -y);

x += Math.cos(angle) * radius;

y += Math.sin(angle) * radius;

angle += angleSpeed;

age++;

if (Math.random() > 0.75)    // 加入随机变化

{

angleSpeed *= -1;

}

if (age >= 15)

{

ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height);

x = 0;

y = 0;

angle = pi2*0.05;

angleSpeed = 0.2;

age=0;

}

}

setInterval('animate()',100);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出如图4所示的动画效果。此时字母的运动轨迹就随机变化着了。

图4  有着随机变化的沿着圆周线运动的字母

进一步我们考虑,能否将图4的字母轨迹按一个圆周相似地绘制5条呢?采用一个循环加上适当的坐标旋转即可。编写如下的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 w2 = Math.floor(canvas.width/ 2);

var h2 = Math.floor(canvas.height/ 2);

var pi2 = Math.PI * 2;

ctx.font = "36px Impact";

ctx.translate(w2, h2);

var char = "A";

var x =30;

var y =30;

var radius = 30;

var angle = pi2*0.05;

var angleSpeed = 0.2;

color='rgba(0,255,255,0.9)';

age = 0;

symmetry =5;

function animate()

{

for (i = 0;i<symmetry; i++)

{

ctx.fillStyle=color;

ctx.translate(x, y);

ctx.rotate(angle + pi2 / 4);

ctx.fillText(char, -13, 10);

ctx.rotate(-angle-pi2 / 4);

ctx.translate(-x, -y);

ctx.rotate(pi2 / symmetry);

}

x += Math.cos(angle) * radius;

y += Math.sin(angle) * radius;

angle += angleSpeed;

age++;

if (Math.random() > 0.75)

{

angleSpeed *= -1;

}

if (age >= 15)

{

ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height);

x = 30;

y = 30;

angle = pi2*0.05;

angleSpeed = 0.2;

age=0;

}

}

setInterval('animate()',100);

</script>

</body>

</html>

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

图5  字母“A”的5条相似运动轨迹

更进一步,我们将上面程序中的初始坐标位置(x,y)、初始角度angle、角度变化量angleSpeed、字母填充颜色color和相似轨迹条数symmetry均采用随机数的方式确定初值,例如:

x = rand(-w2/2,w2/2);

y = rand(-h2/2,h2/2);

angle = Math.random() * pi2;

angleSpeed = Math.random() * 1 - 0.5;

color='rgba('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+',0.9)';

symmetry =rand(3,10);

编写如下的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 w2 = Math.floor(canvas.width/ 2);

var h2 = Math.floor(canvas.height/ 2);

var pi2 = Math.PI * 2;

ctx.font = "36px Impact";

ctx.translate(w2, h2);

function rand(min,max)

{

return Math.floor(Math.random()*(max-min)+min)

}

var char = "A";

var x,y,radius,angle,angleSpeed,color,age,symmetry;

function reset()

{

x = rand(-w2/2,w2/2);

y = rand(-h2/2,h2/2);

radius = 30;

angle = Math.random() * pi2;

angleSpeed = Math.random() * 1 - 0.5;

color='rgba('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+',0.9)';

age = 0;

symmetry =rand(3,10);

}

reset();

function animate()

{

for (i = 0;i<symmetry; i++)

{

ctx.fillStyle=color;

ctx.translate(x, y);

ctx.rotate(angle + pi2 / 4);

ctx.fillText(char, -13, 10);

ctx.rotate(-angle-pi2 / 4);

ctx.translate(-x, -y);

ctx.rotate(pi2 / symmetry);

}

x += Math.cos(angle) * radius;

y += Math.sin(angle) * radius;

angle += angleSpeed;

age++;

if (Math.random() > 0.75)

{

angleSpeed *= -1;

}

if (age >= 18)

{

ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height);

reset();

}

}

setInterval('animate()',50);

</script>

</body>

</html>

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

图6   字母“A”的随机运动

最后,我们在图6的基础上考虑,能否搞多个字母有周期地组合进行运动,以此得到字母的运动特效呢?编写如下的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 w2 = Math.floor(canvas.width/ 2);

var h2 = Math.floor(canvas.height/ 2);

var pi2 = Math.PI * 2;

ctx.font = "36px Impact";

ctx.translate(w2, h2);

var srcChar =["A","B","C","D","E","F"];

var particles = [];

var eIndex = 0;

var rCnt=0;

function rand(min,max)

{

return Math.floor(Math.random()*(max-min)+min)

}

function resetPart(part)

{

part.char = srcChar[eIndex++];

if (eIndex>=srcChar.length)

{

eIndex=0;

}

part.x = rand(-w2/2,w2/2);

part.y = rand(-h2/2,h2/2);

part.radius = 30;

part.angle = Math.random() * pi2;

part.angleSpeed = Math.random() * 1 - 0.5;

part.color='rgba('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+',0.9)';

part.age = 0;

part.symmetry =rand(3,10);

}

var count=2;

for (var i=0;i<count;i++)

{

var part;

part = {};

resetPart(part);

rCnt++;

particles.push(part);

}

function animate()

{

for (i =0;i<particles.length; i++)

{

part = particles[i];

for (j = 0;j<part.symmetry; j++)

{

ctx.fillStyle=part.color;

ctx.translate(part.x, part.y);

ctx.rotate(part.angle + pi2 / 4);

ctx.fillText(part.char, -13, 10);

ctx.rotate(-part.angle-pi2 / 4);

ctx.translate(-part.x, -part.y);

ctx.rotate(pi2 / part.symmetry);

}

part.x += Math.cos(part.angle) * part.radius;

part.y += Math.sin(part.angle) * part.radius;

part.angle += part.angleSpeed;

part.age++;

if (Math.random() > 0.75)

{

part.angleSpeed *= -1;

}

if (part.age >= 18)

{

resetPart(part);

rCnt++;

if (rCnt==6)

{

rCnt=0;

ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height);

}

}

}

}

setInterval('animate()',50);

</script>

</body>

</html>

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

图7  字母的运动特效

JavaScript动画实例:运动的字母特效的更多相关文章

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

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

  2. JavaScript动画实例:旋转的圆球

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

  3. JavaScript动画知多少?

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

  4. Javascript动画效果(三)

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

  5. Javascript动画效果(一)

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

  6. Javascript动画效果(二)

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

  7. Javascript动画效果(四)

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  8. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  9. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  10. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

随机推荐

  1. HTTP 错误 500.21 - Internal Server Error 处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”

    HTTP 错误 500.21 - Internal Server Error 处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipe ...

  2. PHP -- Perl风格正则表达式

    1.正则表达式作为一个匹配的模版,是由原子(普通字符,例如a-z),有特殊功能的字符(元字符,例如*.+ 和?等),以及模式修正符三个部分组成.2.在于Perl兼容的正则表达式函数中使用模式时一定要给 ...

  3. 关于Delphi中多线程传递参数的简单问题

    http://bbs.csdn.net/topics/390513469/ unit uThread; interface uses Classes; type Th = class(TThread) ...

  4. 使用jasperreports-5.6.0.jar导致的问题

    使用jasperreports-5.6.0.jar导致的问题 Struts2+jasperReport5.6如下设置: <!-- 社员档案 --> <package name=&qu ...

  5. 将html导出到excel或word

    本质是将html写成word或excel支持的html格式. 如何将html写成word或excel支持的格式? 只需打开计算机上任意一个word或excel文档,打开文件->另存为,选择文件类 ...

  6. webapi单元测试时出现的ConfigurationManager.ConnectionStrings为空错误

    这个是读取配置文件没读到的问题,解决方法很简单,把webapi的配置文件复制到单元测试项目中,并把名字改为App.config即可. 同时 ,推荐使用Unit Test Genertor来做测试,这个 ...

  7. SqlServer2008数据库透明加密

    前几天研究了一下sql数据库的透明加密,记下来加深一下理解. 用脚本创建文件夹 --查文件夹有没有 EXEC master.dbo.xp_fileexist 'D:\DATA\storedcerts' ...

  8. 使用Maven完成自动化打包并部署到Linux服务器下(Tomcat7)

    最近在使用maven,顺便尝试了下tomcat部署.网上找到了很多资料但是都不是最新的,所以贴上比较新的Tomcat7部署代码和配置,方便以后回顾-->测试OK. 1. 首先是配置Tomcat ...

  9. docker安装hadoop

    docker为hadoop的云化带来了极大便利,安装和应用也会更快更方便.进入正题: docker search hadoop 将会看到如下结果: INDEX NAME DESCRIPTION STA ...

  10. 201521123112《Java程序设计》第3周学习总结

    1.本周学习总结 使用工具:百度脑图 2.书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int ...