java 绘制动态小球_JavaScript动画实例:动感小球
已知圆的坐标方程为:
X=R*SIN(θ)
Y=R*COS(θ) (0≤θ≤2π)
将0~2π区间等分48段,即设定间隔dig的值为π/24。θ初始值从0开始,按曲线方程求得坐标值(x,y),并在当前坐标处绘制一个半径为r(相比R,r小得多)实心圆。之后每隔0.05秒,清除画布,将θ的初始值加π/24后,按曲线方程求得新坐标值(x,y),并在求得的新坐标处再绘制一个半径为r的实心圆,这样,可以得到半径为r的圆绕半径为R的圆形轨道动态旋转的动画效果。旋转一周后(即θ的值为2π),令θ重新从初值0开始继续动画过程。
编写如下的HTML代码。
绕圆周旋转的小球
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var i=0;
setInterval(move,50);
function move()
{
ctx.clearRect(0,0,canvas.width,canvas.height);
var dig=Math.PI/24;
x0=250;
y0=200;
ctx.strokeStyle="green";
ctx.beginPath();
ctx.arc(x0,y0,100,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
var x=100*Math.sin(i*dig)+x0;
var y=100*Math.cos(i*dig)+y0;
ctx.arc(x,y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
i=i+1;
if (i>=48) i=0;
}
在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出如图1所示绕圆周旋转的小球。
图1 绕圆周旋转的小球
图1中圆周轨道只有一条,编写如下的HTML文件,通过二重循环绘制如图2所示的布满整个Canvas的多条圆周轨道。
圆周轨道
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var dig=Math.PI/24;
for (k=0;k<=14;k++)
for (n=0;n<=17;n++)
{
x0=30*n;
y0=30*k;
ctx.beginPath();
ctx.strokeStyle="green";
ctx.arc(x0,y0,27,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
}
图2 布满画布的多条圆周轨道
仿图1的程序,让每条轨道上都有一个小球在旋转。编写如下的HTML文件。
动感小球
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var i=0;
setInterval(move,30);
function move()
{
ctx.clearRect(0,0,canvas.width,canvas.height);
var dig=Math.PI/24;
for (k=0;k<=14;k++)
for (n=0;n<=17;n++)
{
x0=30*n;
y0=30*k;
ctx.beginPath();
ctx.strokeStyle="green";
ctx.arc(x0,y0,27,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
var x=27*Math.sin(i*dig)+x0;
var y=27*Math.cos(i*dig)+y0;
ctx.beginPath();
ctx.arc(x,y,3,0,Math.PI*2,true);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
}
i=i+1;
if (i>=48) i=0;
}
在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出如图3所示多个绕圆周旋转的小球。
图3 多个绕圆周旋转的小球
在图3中,所有小球旋转步调一致,整齐划一,缺少动感。如果为各个旋转的小球加上相位,并去掉轨道痕迹。修改HTML文件如下。
动感小球
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var i=0;
setInterval(move,30);
function move()
{
ctx.clearRect(0,0,canvas.width,canvas.height);
var dig=Math.PI/24;
for (k=0;k<=14;k++)
for (n=0;n<=17;n++)
{
x0=30*n;
y0=30*k;
var x=27*Math.sin((i+k*2+n*3)*dig)+x0;
var y=27*Math.cos((i+k*2+n*3)*dig)+y0;
ctx.beginPath();
ctx.arc(x,y,3,0,Math.PI*2,true);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
}
i=i+1;
if (i>=48) i=0;
}
在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出如图4所示动感小球。
图4 动感小球
java 绘制动态小球_JavaScript动画实例:动感小球相关推荐
- java 绘制动态的图形
效果如下 代码如下(初始版本) package cn.com.com;import java.awt.Graphics; import java.awt.Graphics2D; import java ...
- js圆周运动动画_JavaScript动画实例:沿圆周运动的圆圈
1.一个沿圆周运动的圆圈 一个半径为size的圆圈以画布的中心(canvas.width/2,canvas.height/2)为起点,沿着一个圆周运动.编写如下的HTML代码. 沿圆周运动的圆圈 va ...
- java递归mysql生成树_JavaScript图形实例:递归生成树
观察自然界中树的分叉,一根主干生长出两个侧干,每个侧干又长出两个侧干,以此类推,便生长出疏密有致的结构.这样的生长结构,使用递归算法可以模拟出来. 例如,分叉的侧干按45°的偏转角度进行生长的递归示意 ...
- c语言实现小球抛物线动画,CSS实现小球抛物线运动的动画效果 (代码)
本篇文章给大家带来的内容是关于CSS实现小球抛物线运动的动画效果 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速) ...
- python实时绘制动态曲线_pyqt中使用matplotlib绘制动态曲线
一.项目背景: 看了matplotlib for python developers这本书,基本掌握了在pyqt中显示曲线的做法,于是自己写一个. 二.需求描述: 1)X轴显示时间点,显示长度为1分钟 ...
- java如何实现多个小球碰撞后反弹以及绘制动态图。
本次小实验,通过三个类的编写来实现. 首先创建一个点类,其中包含对点的构造方法和多个需要点的构造方法. /*** 点类,表示平面中的点或始点为原点的向量* @author xxx**/ public ...
- java时钟时针绘制代码,Java实现动态模拟时钟
搜索热词 本文实例为大家分享了java动态模拟时钟的具体代码,供大家参考,具体内容如下 应用名称:java动态模拟时钟 用到的知识:javaGUI,java 绘图 开发环境:win10+eclipse ...
- java 制作动态手机壁纸_android 动态切换壁纸实例 利用service机制实现 附完整源码 带动态截图...
[实例简介]通过点击 startService实现 android手机动态壁纸功能 [实例截图] [核心代码] main.xml android:orientation="vertical& ...
- java实现gif动画效果(java显示动态图片)
关闭 关闭 脚本之家 软件下载 源码下载 在线工具 网页教程基础 服务器常用软件 手机版 关注微信 网页制作 网络编程 脚本专栏 脚本下载 数据库 CMS教程 电子书籍 平面设计 媒体动画 操作系统 ...
最新文章
- ios 分类(Category)
- KZWFoudation系列之Router的设计
- [ ArcGIS for Server 10.1 系列 ] - 分布式部署GIS Servers
- 一个应用被部署到SAP云平台后,启动时打印的日志
- Request load 没有成功执行的原因分析
- vba 指定列后插入列_在不同的列左侧插入指定数量的空白列
- 作者:吕红胤,女,电子科技大学副研究员。
- 窗体的布局 1124
- ZooKeeper -- API文档
- ios swift 实现饼状图进度条,swift环形进度条
- [最小生成树][Dij] Jzoj P5818 做运动
- canvas.toDataURL()报错
- vue2.0项目的环境配置以及有哪些的坑
- 2.1.0 Python初识面向对象
- 倒车雷达c语言编程,基于单片机的倒车雷达设计
- c语言算法五大特性,计算机算法必须具备哪5个特性?
- [导入]polygraph3d三维运行时引擎为silverlight 1.0.zip(15.69 KB)
- 住宅IP和机房IP有什么区别,爬虫用哪种好?
- android edittext过滤空格,关于android:在EditText中拦截空格键的问题
- Docker一些使用问题的解决方法