JavaScript动画实例：曲线的绘制
在“JavaScript图形实例：曲线方程”一文中，我们给出了15个曲线方程绘制图形的实例。这些曲线都是根据其曲线方程，在[0,2π]区间取一系列角度值，根据给定角度值计算对应的各点坐标，然后在计算出的坐标位置描点，从而绘制出曲线。
我们可以将曲线的绘制过程动态展示出来。
例如，对于星形线的绘制，编写如下的HTML代码。
<!DOCTYPE>
<html>
<head>
<title>星形线的绘制</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,300,300);
var theta=0;
var dig=Math.PI/256;
function motion()
{
ctx.beginPath();
var x = 80*Math.cos(theta)*Math.cos(theta)*Math.cos(theta)+150;
var y = 80*Math.sin(theta)*Math.sin(theta)*Math.sin(theta)+150;
ctx.arc(x,y, 3, 0, 2 * Math.PI);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
theta=theta+dig;
if (theta>2*Math.PI)
{
theta=0;
ctx.clearRect(0,0,300,300);
}
}
setInterval('motion()',20);
</script>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到星形线的动态绘制过程，如图1所示。
图1 星形线的绘制
将上面程序中的语句
var x = 80*Math.cos(theta)*Math.cos(theta)*Math.cos(theta)+150;
var y = 80*Math.sin(theta)*Math.sin(theta)*Math.sin(theta)+150;
改写为：
x = 8*(16*Math.pow(Math.sin(theta),3))+150;
y= 150-8*(13*Math.cos(theta)-5*Math.cos(2*theta)-2*Math.cos(3*theta)-Math.cos(4*theta));
就可以在画布中看到如图2所示的心型线的动态绘制过程。
图2 心型线的绘制
对于更多的曲线，均可以如同心型线一样，根据其参数方程，适当修改坐标位置（x,y）的计算语句即可。
为此，编写如下的HTML代码。
<!DOCTYPE>
<html>
<head>
<title>曲线的绘制</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="float:left;border:3px double #996633;">
</canvas>
<form><br/>
<input id="R1" name="spiral" type="radio" checked onclick="go()" />星形线<br/><br/>
<input id="R2" name="spiral" type="radio" onclick="go()" />心型线<br/><br/>
<input id="R3" name="spiral" type="radio" onclick="go()" />玫瑰线<br/><br/>
<input id="R4" name="spiral" type="radio" onclick="go()" />太阳线<br/><br/>
<input id="R5" name="spiral" type="radio" onclick="go()" />六瓣花型线<br/><br/>
</form>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var a=0;
function motion()
{
if(document.getElementById('R1').checked)
{
dig=Math.PI/128;
x = 80*Math.cos(a)*Math.cos(a)*Math.cos(a)+150;
y = 80*Math.sin(a)*Math.sin(a)*Math.sin(a)+150;
}
if(document.getElementById('R2').checked)
{
dig=Math.PI/128;
x = 8*(16*Math.pow(Math.sin(a),3))+150;
y= 150-8*(13*Math.cos(a)-5*Math.cos(2*a)-2*Math.cos(3*a)-Math.cos(4*a));
}
if(document.getElementById('R3').checked)
{
dig=Math.PI/400;
x=150+100 * Math.sin(4*a)*Math.cos(a);
y=150+100 * Math.sin(4*a)*Math.sin(a);
}
if(document.getElementById('R4').checked)
{
dig=Math.PI/720;
r=15*Math.cos(30*a)+12;
x = 150+5*r*Math.cos(a);
y = 150+5*r*Math.sin(a);
}
if(document.getElementById('R5').checked)
{
dig=Math.PI/512;
r=100*(1+Math.sin(18*a)/5)*(0.5+Math.sin(6*a)/2);
x=150+r*Math.cos(a);
y=150+r*Math.sin(a);
}
ctx.beginPath();
ctx.arc(x,y,2,0, 2 * Math.PI);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
a=a+dig;
if (a>2*Math.PI)
{
a=0;
ctx.clearRect(0,0,300,300);
}
}
function go()
{
ctx.clearRect(0,0,400,300);
a=0;
setInterval('motion()',30);
}
go();
</script>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到5种曲线绘制的动画效果，如图3所示。更多曲线的绘制，大家可以根据选定的曲线方程自行添加相应代码即可。
图3 曲线绘制动画
JavaScript动画实例：曲线的绘制的更多相关文章
- JavaScript动画实例：李萨如曲线
在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...
- JavaScript动画实例：递归分形图动态展示
在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...
- JavaScript动画实例：沿五角星形线摆动的小圆
五角星形线的笛卡尔坐标方程式可设为: r=10+(3*sin(θ*2.5))^2 x=r*cos(θ) y=r*sin(θ) (0≤θ≤2π) 根据这个曲线方程,在[0,2 ...
- JavaScript动画实例：旋转的圆球
1．绕椭圆轨道旋转的圆球 在Canvas画布中绘制一个椭圆,然后在椭圆上绘制一个用绿色填充的实心圆.之后每隔0.1秒刷新,重新绘制椭圆和实心圆,重新绘制时,实心圆的圆心坐标发生变化,但圆心坐标仍然位于 ...
- JavaScript动画实例：动感小球
已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ) (0≤θ≤2π) 将0~2π区间等分48段,即设定间隔dig的值为π/24.θ初始值从0开始,按曲线方程求得坐标值(x,y), ...
- JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
- JavaScript动画实例：螺旋线
数学中有各式各样富含诗意的曲线,螺旋线就是其中比较特别的一类.螺旋线这个名词来源于希腊文,它的原意是“旋卷”或“缠卷”.例如,平面螺旋便是以一个固定点开始向外逐圈旋绕而形成的曲线.在2000多年以前, ...
- JavaScript动画实例：旋转的正三角形
给定一个正三角形的重心坐标为(x0,y0),高为h,可以用如下的语句绘制一个底边水平的正三角形. ctx.beginPath(); ctx.moveTo(x0,y0-h*2/3); ctx.lineT ...
- JavaScript动画实例：炸开的小球
1．炸开的小球 定义一个小球对象类Ball,它有6个属性:圆心坐标(x,y).小球半径radius.填充颜色color.圆心坐标水平方向的变化量speedX.圆心坐标垂直方向的变化量speedY. B ...
随机推荐
- 拒绝降权！教你用 Python 确保制作的短视频独一无二
1. 场景 前段时间有人私信我,说自己辛辛苦苦剪辑的短视频,上传到某平台后,由于播放量太大,收到 降权 的通知,直接导致这个账号废掉了! 其实,各大视频平台都有自己的一套鉴别算法,针对视频的二次创作, ...
- xutils工具上传日志文件--后台服务器的搭建
在上一篇文章中使用xutils将手机上保存的日志上传到后台服务器中,现在我们来讲后台服务器是如何搭建的 后台服务器采用jsp+sevlet+mysql的框架 首先讲mysql数据库的表的建立 在fil ...
- nmap二层发现
使用nmap进行arp扫描要使用一个参数:-sn,该参数表明屏蔽端口扫描而只进行arp扫描. nmap支持ip段扫描,命令:nmap -sn 192.168.1.0/24 nmap速度比arping快 ...
- 云服务器终端命令显示-bash-4.2#怎么解决
原因:删除了root/.bashrc 和 root/.bash_profile两个文件的丢失 解决办法: -bash-4.2# cp /etc/skel/.bashrc /root/ -bash-4. ...
- QUIC/HTTP3 协议简析
从 HTTP 的进化历史讲起,细说使用协议的变迁,了解原因发现问题,解码 QUIC 在 HTTP3 中的支撑作用,共同探讨 HTTP3 的未来. HTTP.HTTP2 和 HTTP3 先和大家来回顾一 ...
- Dll的多字节和Unicode
Dll的多字节和Unicode 分类: MFC2013-10-17 13:00 28人阅读 评论(0) 收藏 举报 dll字符集字符集多字节Unicode 我们定义dll的时候会区分: 字符集:使用多 ...
- 初探numpy——广播和数组操作函数
numpy广播(Broadcast) 若数组a,b形状相同,即a.shape==b.shape,那么a+b,a*b的结果就是对应数位的运算 import numpy as np a=np.array( ...
- 程序员的修炼-我们为什么会编写BUG
在最近的一周,我维护的业务系统出现了很多坏毛病,一周七天crash掉了4次,每次都需要都是因为一点很小的问题,触发了蝴蝶效应,导致整个系统全盘崩溃,于是产生除了叙述本篇的想法,当然这并不是为了掩盖我在 ...
- 【Oracle】rman中SBT_TYPE类型的备份如何删除
技阳的rman数据库出现删除rman备份失败,原因是出现SBT_TYPE的磁带备份. [BEGIN] 2018/8/13 13:48:42 RMAN> list backup; List of ...
- Python3笔记006 - 2.3 变量
第2章 python语言基础 python语法特点 保留字与标识符 变量 数据类型 运算符 输入和输出 2.3 变量 在python中,不需要先声明变量类型,直接赋值即可创建各种类型的变量. 1.定义 ...