JavaScript动画实例：运动的字母特效
已知圆的坐标方程为：
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动画实例：运动的字母特效的更多相关文章
- JavaScript动画实例：李萨如曲线
在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...
- JavaScript动画实例：递归分形图动态展示
在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...
- JavaScript动画实例：曲线的绘制
在“JavaScript图形实例:曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例.这些曲线都是根据其曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出 ...
- JavaScript动画实例：炸开的小球
1．炸开的小球 定义一个小球对象类Ball,它有6个属性:圆心坐标(x,y).小球半径radius.填充颜色color.圆心坐标水平方向的变化量speedX.圆心坐标垂直方向的变化量speedY. B ...
- JavaScript动画实例：旋转的圆球
1．绕椭圆轨道旋转的圆球 在Canvas画布中绘制一个椭圆,然后在椭圆上绘制一个用绿色填充的实心圆.之后每隔0.1秒刷新,重新绘制椭圆和实心圆,重新绘制时,实心圆的圆心坐标发生变化,但圆心坐标仍然位于 ...
- JavaScript动画实例：动感小球
已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ) (0≤θ≤2π) 将0~2π区间等分48段,即设定间隔dig的值为π/24.θ初始值从0开始,按曲线方程求得坐标值(x,y), ...
- JavaScript动画实例：螺旋线
数学中有各式各样富含诗意的曲线,螺旋线就是其中比较特别的一类.螺旋线这个名词来源于希腊文,它的原意是“旋卷”或“缠卷”.例如,平面螺旋便是以一个固定点开始向外逐圈旋绕而形成的曲线.在2000多年以前, ...
- JavaScript动画实例：旋转的正三角形
给定一个正三角形的重心坐标为(x0,y0),高为h,可以用如下的语句绘制一个底边水平的正三角形. ctx.beginPath(); ctx.moveTo(x0,y0-h*2/3); ctx.lineT ...
- JavaScript动画实例：沿五角星形线摆动的小圆
五角星形线的笛卡尔坐标方程式可设为: r=10+(3*sin(θ*2.5))^2 x=r*cos(θ) y=r*sin(θ) (0≤θ≤2π) 根据这个曲线方程,在[0,2 ...
随机推荐
- C/C++编程语言制作《游戏内存外挂》
通过C/C++编程语言编写一个简单的外挂,通过 API 函数修改游戏数据,从而实现作弊功能 对象分析要用的 API 函数简单介绍编写测试效果. 下面是我整理好的全套C/C++资料,加入天狼QQ7269 ...
- testNG jar包启动找不到org.testng.TestNG
主要是因为打包时依赖的jar包没有打入,网上有很多需要将对应的jar单独拷贝出来然后通过classpath引用启动,但是感觉这个就是个无底洞.拷贝了这么多个包最后还是说找不到ObjectId 启动命令 ...
- Django setting设置 常用设置
目录 Django配置文件基本设置 前言 setting配置汇总 一.APP路径 二.数据库配置 三.sql语句展示 四.静态文件目录 五.media文件配置 六.数据库中的UserInfo(用户表) ...
- one-hot 编码
def onehot(labels): '''one-hot 编码''' #数据有几行输出 n_sample = len(labels) #数据分为几类.因为编码从0开始所以要加1 n_class = ...
- SpringBoot代码生成器
Code-Generate 代码生成器 简介 一个基于原生Mysql & SpringBoot & Mybatis 的代码生成器,建表之后即可完全解放双手,适合: 规律性定制化开发 解 ...
- P1433 吃奶酪（洛谷）状压dp解法
嗯?这题竟然是个绿题. 这个题真的不(很)难,我们只是不会计算2点之间的距离,他还给出了公式,这个就有点…… 我们直接套公式去求出需要的值,然后普通的状压dp就可以了. 是的状压dp. 这个题的数据加 ...
- 数据库分布式事务XA规范介绍及Mysql底层实现机制
1. 引言 分布式事务主要应用领域主要体现在数据库领域.微服务应用领域.微服务应用领域一般是柔性事务,不完全满足ACID特性,特别是I隔离性,比如说saga不满足隔离性,主要是通过根据分支事务执行成功 ...
- 动手实现一个简单的 rpc 框架到入门 grpc (下)
之前手动实现了一次简陋的 rpc 调用,为了简单使用了 json 编码信息,其实这是非常不可靠的,go 中 json 解析会有一些问题,比如整数会变成浮点数,而且 json 字符串比较占空间. gRP ...
- 基于Vue的UI框架element el-table表格的自定义排序
html部分: <el-table-column prop="phoneCache" label="手机缓存包编号" align="center ...
- ajax异步上传图片&SpringMVC后台代码
function uploadPic(){ var options = { url : "/upload/updatePic.action", type : "post& ...