JavaScript动画实例:李萨如曲线

在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法。如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以展示指定曲线的绘制过程。

1.李萨如曲线

设定李萨如曲线的坐标方程为:

X=SIN(2θ)

Y=SIN(3θ)     (0≤θ≤2π)

将0~2π区间等分512段,取θ的初始值π/256,按曲线方程求得坐标值(x,y),并在当前坐标处通过绘制一个实心圆的方式描点。之后每隔0.02秒,将θ的初始值加π/256后,按曲线方程求得新坐标值(x,y),并在求得的新坐标处再通过绘制一个实心圆的方式继续描点,这样,可以得到动态绘制的李萨如曲线。曲线绘制完成(即θ的值为2π),将画布清除,令θ重新从初值π/256开始继续动画过程。

编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>李萨如曲线</title>

<script type="text/javascript">

var context;

var i;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

context = canvas.getContext(‘2d‘);

context.fillStyle="#EEEEFF";

context.fillRect(0,0,300,300);

i=1;

setInterval(go,20);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var dig=Math.PI/256;

x=150+100*Math.sin(2*i*dig);

y=150-100*Math.sin(3*i*dig);

context.beginPath();

context.arc(x, y, 3, 0, 2 * Math.PI);

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>512)

{

i=1;

context.clearRect(0,0,300,300);

}

}

</script>

</head>

<body >

<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出李萨如曲线的动态绘制过程,如图1所示。

图1  李萨如曲线

2.阿基米德螺线

编写HTML文件如下:

<!DOCTYPE html>

<head>

<title>阿基米德螺线</title>

<script type="text/javascript">

var context;

var i;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

context = canvas.getContext(‘2d‘);

context.fillStyle="#EEEEFF";

context.fillRect(0,0,300,300);

i=1;

setInterval(go,20);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var dig=Math.PI/128;

x=150+5*i*dig*Math.sin(i*dig);

y=150+5*i*dig*Math.cos(i*dig);

context.beginPath();

context.arc(x, y, 3, 0, 2 * Math.PI);

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>1024)

{

i=1;

context.clearRect(0,0,300,300);

}

}

</script>

</head>

<body >

<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出阿基米德螺线的动态绘制过程,如图2所示。

图2  阿基米德螺线

3.螺旋线

设定螺旋线的坐标方程为:

X=30*COS(θ)+70*COS(θ/4)

Y=30*SIN(θ) - 70*SIN(θ/4)   (0≤θ≤8π)

将螺旋线的绘制过程进行动态展示,编写HTML文件如下。

<!DOCTYPE html>

<head>

<title>螺旋线</title>

<script type="text/javascript">

var context;

var i;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

context = canvas.getContext(‘2d‘);

context.fillStyle="#EEEEFF";

context.fillRect(0,0,300,300);

i=1;

setInterval(go,20);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var x = 150+30*Math.cos(i*Math.PI/72) +70*Math.cos(i/4*Math.PI/72);

var y = 150+30*Math.sin(i*Math.PI/72) -70*Math.sin(i/4*Math.PI/72);

context.beginPath();

context.arc(x, y, 3, 0, 2 * Math.PI);

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>576)

{

i=1;

context.clearRect(0,0,300,300);

}

}

</script>

</head>

<body >

<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;"></canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中看到螺旋线绘制动画,如图3所示。

图3  螺旋线绘制

4.七彩花瓣

设定四叶花瓣线的坐标方程为:

X=R*COS(2θ)*SIN(θ)

Y= R*COS(2θ)*COS(θ)   (0≤θ≤2π)

按这个方程,可以绘制如图4所示的四叶花瓣线。

图4 四叶花瓣线

将四叶花瓣线的绘制过程进行动态展示,并且每绘制一个新点,填充颜色在7中颜色间进行切换,这样绘制出七彩花瓣。编写HTML文件如下。

<!DOCTYPE>

<html>

<head>

<title>七彩花瓣</title>

</head>

<body >

<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;">

</canvas>

<script>

var canvas = document.getElementById(‘myCanvas‘);

var context = canvas.getContext(‘2d‘);

var i=0;j=0.05,t=0;

var colors=new Array(‘red‘,‘orange‘,‘yellow‘,‘green‘,‘cyan‘,‘blue‘,‘purple‘);

function timing() {

t=t+1;

i=i+j;

var r=120*Math.cos(2*i);

if(t>6){t=0;}

var x=200+r*Math.sin(i);

var y=150+r*Math.cos(i);

context.beginPath();

context.arc(x,y,5,0,2*Math.PI);

context.fillStyle=colors[t];

context.fill();

if(i>6.3){j=-0.05;context.clearRect(0,0,400,300);}

if(i<0){j=0.05;context.clearRect(0,0,400,300);}

}

window.setInterval(‘timing()‘,200);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中看到七彩花瓣绘制动画,如图5所示。

图5  七彩花瓣

原文地址:https://www.cnblogs.com/cs-whut/p/12100116.html

时间: 2024-10-19 15:33:48

JavaScript动画实例:李萨如曲线的相关文章

JavaScript动画知多少?

今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval 或 setTimeout API,高频改变DOM元素的一些属性,即可创造一个肉眼可见的动画效果.一个看起来非常流畅的JS动画除了需要良好的变换算法外,与其执行宿主也是非不开的.程序写得再好,如果浏览器过于老旧,电脑CPU性能低下,也会出现卡顿,甚至卡死. 执行一个动画函数对于浏览器来说是个苦差,设置

RequestAnimationFrame更好的实现Javascript动画

一直以来,JavaScript的动画都是通过定时器和间隔来实现的.虽然使用CSS transitions 和 animations使Web开发实现动画更加方便,但多年来以JavaScript为基础来实现动画却很少有所改变.直到Firefox 4的发布,才带来了第一种对JavaScript动画的改善的方法.但要充分认识改善,这有利于帮助我们了解web动画是如何演变改进的. 定时器Timer 用于创建动画的第一个模式是使用链式setTimeout()调用.在Netscape 3′s hayday的很

javascript动画效果之缓冲动画(修改版)

在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one,two), 30);时,发现show里面的参数one和two无法被导入,所以需要做以下代码改进和优化 原版的html和css代码在这里javascript动画效果之缓冲动画 js代码如下 1 <script> 2 function $(id) { 3 return typeof id === &

室外设计 3D室外效果图教程 Sketchup园林景观教程 室外漫游动画实例教程 景观设计手绘教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

Javascript动画效果(四)

Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢? 首先我们我们完成该效果的html和css代码,代码如下: html部分代码: <div id="move"> <a href="#"><i><img src="images/1

JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本

原文:JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本 一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页面大概内容是什么. 效果图: 2.实现这个效果的思路 (1)把主页的几个链接的背景图片缩放到150px*150px,拼成一张750*150的图片,并保存为slideshow.png,存放到ima

javascript动画系列第一篇——模拟拖拽

× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛.javascript动画广泛使用的还是模拟拖拽.本文将详细介绍该内容 原理介绍 模拟拖拽最终效果和在桌面上移动文件夹的效果类似 鼠标按下时,拖拽开始.鼠标移动时,被拖拽元素跟着鼠标一起移动.鼠标抬起时,拖拽结束 所以,拖拽的重点是确定被拖拽元素是如何移动的

慕课网javascript动画特效 多透明度 源代码

慕课网javascript动画特效 多透明度 源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多物体运动</title> <style> div{ width:200px; height:100px; background:yellow; margin-bottom: 20px; filte

C语言与MATLAB接口 编程与实例 李传军编着

罗列一下以前自己学习C语言与MATLAB混编的笔记,顺便复习一遍. <C语言与MATLAB接口 编程与实例 李传军编着>(未看完,目前看到P106) 目录P4-8 ****************************************************** C-MEX函数:从MATLAB调用C语言或Fortran语言编写的函数. MEX文件:是一种按一定格式,使用C语言或者FORTRAN语言编写的,由MATLAB解释器自动调用并执行的动态链接函数.在Windows系统中,MEX