JavaScript动画实例运动的字母特效.docx
- 文档编号:10120953
- 上传时间:2023-05-23
- 格式:DOCX
- 页数:17
- 大小:1.16MB
JavaScript动画实例运动的字母特效.docx
《JavaScript动画实例运动的字母特效.docx》由会员分享,可在线阅读,更多相关《JavaScript动画实例运动的字母特效.docx(17页珍藏版)》请在冰点文库上搜索。
JavaScript动画实例运动的字母特效
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代码。
(一)
3pxdouble#996633;background: black;"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); varw2=Math.floor(canvas.width/2); varh2=Math.floor(canvas.height/2); varpi2=Math.PI*2; ctx.font="36pxImpact"; ctx.translate(w2,h2); varchar="A"; varx=0; vary=0; varradius=30; varangle=0; varangleSpeed=0.2; varcolor='rgba(0,255,255,0.9)'; varage=0; functionanimate() { 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); 在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出如图1所示的动画效果。 图1angleSpeed=0.2的字母运动效果 若将上面程序中的语句“varangleSpeed=0.2;”改写为“varangleSpeed=0.45;”,其余部分保持不变,则在浏览器窗口中呈现出如图2所示的动画效果。 图2angleSpeed=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文件。
(二)
3pxdouble#996633;background: black;"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); varw2=Math.floor(canvas.width/2); varh2=Math.floor(canvas.height/2); varpi2=Math.PI*2; ctx.font="36pxImpact"; ctx.translate(w2,h2); varchar="A"; varx=0; vary=0; varradius=30; varangle=pi2*0.05; varangleSpeed=0.2; varcolor='rgba(0,255,255,0.9)'; varage=0; functionanimate() { 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); 在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出如图4所示的动画效果。 此时字母的运动轨迹就随机变化着了。 图4有着随机变化的沿着圆周线运动的字母 进一步我们考虑,能否将图4的字母轨迹按一个圆周相似地绘制5条呢? 采用一个循环加上适当的坐标旋转即可。 编写如下的HTML文件。
3pxdouble#996633;background: black;"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); varw2=Math.floor(canvas.width/2); varh2=Math.floor(canvas.height/2); varpi2=Math.PI*2; ctx.font="36pxImpact"; ctx.translate(w2,h2); varchar="A"; varx=30; vary=30; varradius=30; varangle=pi2*0.05; varangleSpeed=0.2; color='rgba(0,255,255,0.9)'; age=0; symmetry=5; functionanimate() { for(i=0;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); 在浏览器中打开包含这段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代码。
3pxdouble#996633;background: black;"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); varw2=Math.floor(canvas.width/2); varh2=Math.floor(canvas.height/2); varpi2=Math.PI*2; ctx.font="36pxImpact"; ctx.translate(w2,h2); functionrand(min,max) { returnMath.floor(Math.random()*(max-min)+min) } varchar="A"; varx,y,radius,angle,angleSpeed,color,age,symmetry; functionreset() { 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(); functionanimate() { for(i=0;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); 在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出如图6所示的动画效果。 图6字母“A”的随机运动 最后,我们在图6的基础上考虑,能否搞多个字母有周期地组合进行运动,以此得到字母的运动特效呢? 编写如下的HTML文件。
3pxdouble#996633;background: black;"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); varw2=Math.floor(canvas.width/2); varh2=Math.floor(canvas.height/2); varpi2=Math.PI*2; ctx.font="36pxImpact"; ctx.translate(w2,h2); varsrcChar=["A","B","C","D","E","F"]; varparticles=[]; vareIndex=0; varrCnt=0; functionrand(min,max) { returnMath.floor(Math.random()*(max-min)+min) } functionresetPart(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); } varcount=2; for(vari=0;i { varpart; part={}; resetPart(part); rCnt++; particles.push(part); } functionanimate() { for(i=0;i { part=particles[i]; for(j=0;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); 在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出如图7所示的动画效果。 图7字母的运动特效
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 动画 实例 运动 字母 特效