JavaScript怎么實現(xiàn)圓周運動動畫

今天小編給大家分享一下JavaScript怎么實現(xiàn)圓周運動動畫的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　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文件，可以在瀏覽器窗口中呈現(xiàn)出如圖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文件，可以在瀏覽器窗口中呈現(xiàn)出如圖2所示的動畫效果。

以上就是“JavaScript怎么實現(xiàn)圓周運動動畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。