JS完成画圆圈的小球

效果图

图（1）

图（2）

代码如下：

<html>
<head>
<title>JS动画之转动的小球</title>
<style type="text/css">
div{width:20px;height:20px;background-color:black;position:absolute;border:1px solid red;border-radius:50%;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById('box');
box.style.left="600";
box.style.top="300px";
var n=0;         //正弦函数的横坐标，理解为时间轴好一点。
function rotation()
{
 box.style.left=(600-Math.sin(1/180)*80)+Math.sin(n/180)*80+"px";  //300是小球的没开始运动的初始位置，n表示时间轴，后边是除数是为了将时间细分，使运动更平滑，80表示半径。
 box.style.top=(300-Math.cos(1/180)*80)+Math.cos(n/180)*80+"px";  //第一个括号中的内容是为了让小球在开始运动时处于初始位置（300,300）
 var dr = document.createElement('div');
 dr.style.left=(600-Math.sin(1/180)*80)+Math.sin(n/180)*80+"px";
 dr.style.top=(300-Math.cos(1/180)*80)+Math.cos(n/180)*80+"px";
 document.body.appendChild(dr);
 n++;
 if(n>180*2*Math.PI)return false;  // 0 到 2π 为一个转动周期，如果要半圆，只需将n的取值范围减半，如需反方向转动，调换left和top的值即可。
 setTimeout(rotation,1);
}
rotation();
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 原生javascript模仿win8等待提示圆圈进度条

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数

  • js+canvas简单绘制圆圈的方法

    js+canvas简单绘制圆圈的方法

    本文实例讲述了js+canvas简单绘制圆圈的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • javascript实现3D变换的立体圆圈实例

    javascript实现3D变换的立体圆圈实例

    本文实例讲述了javascript实现3D变换的立体圆圈.分享给大家供大家参考.具体如下: 这里使用javascript实现会变换的立体圆圈,在网页3D变化,变色的圆圈特效,网页上的3d圆圈特效.圆圈上的每一点的颜色并不一样,在黑色的网页背景下更能看清楚. 运行效果如下图所示: 具体代码如下: <html> <head> <title>变色的圆圈</title> <style type="text/css"> <!--

  • Javascript实现可旋转的圆圈实例代码

    Javascript实现可旋转的圆圈实例代码

    本文实例讲述了Javascript实现可旋转的圆圈.分享给大家供大家参考.具体如下: 这里基于Javascript实现会旋转的圆圈,有点三维变幻的效果,立体感很强,代码主要是基于JS,学习Js脚本编程来说,是个学习JS生成动画的好范例. 运行效果如下图所示: 具体代码如下: <html> <head> <title>旋转的圆圈</title> <meta http-equiv="Content-Type" content="

  • JS完成画圆圈的小球

    JS完成画圆圈的小球

    效果图 图(1) 图(2) 代码如下: <html> <head> <title>JS动画之转动的小球</title> <style type="text/css"> div{width:20px;height:20px;background-color:black;position:absolute;border:1px solid red;border-radius:50%;} </style> </he

  • 纯js实现画一棵树的示例

    纯js实现画一棵树的示例

    用纯js画一棵树.思路: 1.一棵树的图片,作为页面背景: 2.通过html5中的canvas画布进行遮罩: 3.定时每隔10ms,从下往上清除1px的遮罩: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My JS tree</title> <style> body { width: 1000px; height: 570px;

  • JS+canvas画一个圆锥实例代码

    JS+canvas画一个圆锥实例代码

    以下是我们给大家分享是实例代码: <html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <canvas id='cvs' width='1000' height="800"> </canvas> <script> const cvs =document.getElementById('cvs'); // 计算画布的宽度

  • Android自定义圆形View实现小球跟随手指移动效果

    本文实例为大家分享了Android实现小球跟随手指移动效果的具体代码,供大家参考,具体内容如下 一. 需求功能 手指在屏幕上滑动,红色的小球始终跟随手指移动. 实现的思路: 1)自定义View,在onDraw中画圆作为小球: 2)重写自定义View的onTouchEvent方法,记录触屏坐标,用新的坐标重新绘制小球: 3)在布局中引用自定义View布局,运行程序,实现跟随手指移动效果. 关键技术点 自定义View应用.触摸事件处理.canvas绘图.Paint应用. 实现步骤 1. 新建一个工程

  • 原生js canvas实现鼠标跟随效果

    本文实例为大家分享了canvas实现鼠标跟随效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas鼠标跟随效果(原生js实现)</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m

  • c# Graphics使用方法(画圆写字代码)

    画填充圆:         复制代码 代码如下: Graphics gra = this.pictureBox1.CreateGraphics();gra.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;Brush bush = new SolidBrush(Color.Green);//填充的颜色gra.FillEllipse(bush, 10, 10, 100, 100);//画填充椭圆的方法,x坐标.y坐标.

  • python3实现小球转动抽奖小游戏

    python3实现小球转动抽奖小游戏

    最近老师在讲 tkinter,所以我做了一个抽奖小游戏. 一.效果图 先上效果图.红色的小球会围绕蓝色小球做环形运动.我设置的四个角是奖品,其余的都是再接再厉. 二.方法 基于tkinter中的button,text,PIL ,time.Canvas drawPath():用于画蓝色的小球 Ball类 初始化画布.运动小球大小.运动的起点. ball类->draw() 控制小球的运动.这里用到一个方法叫canvas.coords.这个方法可以获取运动小球当前在画布上的坐标.并返回一个数组.比如

  • c语言小游戏程序之弹跳小球的实现代码

    c语言小游戏程序之弹跳小球的实现代码

    现在说一下其中一个最简单的小程序:弹跳小球 ---------------LINE---------------- 首先我们知道,在窗口的坐标系原点是在窗口左上角的,如图所示 然后我们如果想在这个坐标系里面的某个点上画出一个小球,那么它的坐标系应该就是这样的 转换到c语言的思维的话:X0既是打印出X0个"\n",Y0既是打印出Y0个空格!!!! SO 代码如下 #include <stdio.h> #include <stdlib.h> int main() {

  • java通过方向键控制小球移动的小游戏

    本文需求实现了java通过方向键控制小球移动的具体过程,供大家参考,具体内容如下 需求分析: 第一 要画出一个小球 第二 要能通过控制方向键控制它的移动 第一部分的实现 1.首先要画一个大窗体 public class BallMove extends JFrame 在开发Java应用程序时,通常情况下利用JFrame创建大窗口.利用JFrame创建的窗口分别包含一个标题.最小化按钮.最大化按钮和关闭按钮 用主类去继承JFrame类就可以使用它的方法啦 2.接着用一个类来继承JPanel 如果说

随机推荐