js圆周运动动画_JavaScript动画实例

作者：管理员

发布时间：2021/6/12 17:21:16

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=4933

　　1.一个沿圆周运动的圆圈


　　一个半径为size的圆圈以画布的中心（canvas.width/2,canvas.height/2）为起点，沿着一个圆周运动。编写如下的HTML代码。


　　沿圆周运动的圆圈


　　varcanvas=document.createElement（'canvas'）;varctx=canvas.getContext（'2d'）;


　　document.body.appendChild（canvas）;


　　canvas.width=window.innerWidth;


　　canvas.height=window.innerHeight;


　　ctx.beginPath（）;


　　ctx.fillStyle='rgba（0, 0, 0, 1）';


　　ctx.fillRect（0,0, canvas.width, canvas.height）;varangle=360;varpos=[canvas.width/2,canvas.height/2];varsize=10;varspeed=1;varcurve=0.5;varcolor='rgba（69,204,255,.95）';functiondraw （）


　　{varradians=angle*Math.PI/180;


　　pos[0]+=Math.cos（radians）*speed;


　　pos[1]+=Math.sin（radians）*speed;


　　angle+=curve;


　　ctx.strokeStyle=color;


　　ctx.beginPath（）;


　　ctx.arc（pos[0],pos[1],size,0,2*Math.PI）;


　　ctx.stroke（）;


　　window.requestAnimationFrame（draw）;


　　}


　　window.requestAnimationFrame（draw）;


　　View Code


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


　　图1? 沿圆周运动的一个圆圈


　　由图1可知，圆圈运动的起点（canvas.width/2,canvas.height/2）位于运动所沿的圆周上angle==360°的位置。


　　2.两个沿圆周运动的圆圈


　　在画布中放置两个圆圈，两个圆圈的起点均位于画布中心（canvas.width/2,canvas.height/2），一个圆圈从所沿圆周的45°处沿圆周运动，另一个圆圈从所沿圆周的135°处沿圆周运动。编写如下的HTML代码。


　　沿圆周运动的圆圈


　　varcanvas=document.createElement（'canvas'）;varctx=canvas.getContext（'2d'）;


　　document.body.appendChild（canvas）;


　　canvas.width=window.innerWidth;


　　canvas.height=window.innerHeight;


　　ctx.beginPath（）;


　　ctx.fillStyle='rgba（0, 0, 0, 1）';


　　ctx.fillRect（0,0, canvas.width, canvas.height）;varangle1=45;varangle2=135;varpos1=[canvas.width/2,canvas.height/2];varpos2=[canvas.width/2,canvas.height/2];varsize=10;varspeed=1;varcurve=0.5;varcolor1='rgba（69,204,255,.95）';varcolor2='rgba（255,212,50,.95）';functiondraw （）


　　{varradians=angle1*Math.PI/180;


　　pos1[0]+=Math.cos（radians）*speed;


　　pos1[1]+=Math.sin（radians）*speed;


　　angle1+=curve;


　　radians=angle2*Math.PI/180;


　　pos2[0]+=Math.cos（radians）*speed;


　　pos2[1]+=Math.sin（radians）*speed;


　　angle2+=curve;


　　ctx.strokeStyle=color1;


　　ctx.beginPath（）;


　　ctx.arc（pos1[0],pos1[1],size,0,2*Math.PI）;


　　ctx.stroke（）;


　　ctx.strokeStyle=color2;


　　ctx.beginPath（）;


　　ctx.arc（pos2[0],pos2[1],size,0,2*Math.PI）;


　　ctx.stroke（）;//fade（）;


　　window.requestAnimationFrame（draw）;


　　}functionfade （）


　　{


　　ctx.beginPath（）;


　　ctx.fillStyle='rgba（0, 0, 0, .03）';


　　ctx.fillRect（0,0, canvas.width, canvas.height）;


　　}


　　window.requestAnimationFrame（draw）;


　　View Code


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






关键字：jquery