JavaScript怎么实现圆周运动动画

今天小编给大家分享一下JavaScript怎么实现圆周运动动画的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联公司，专注为中小企业提供官网建设、营销型网站制作、成都响应式网站建设公司、展示型成都网站设计、网站制作等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

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所示的动画效果。

以上就是“JavaScript怎么实现圆周运动动画”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。