JavaScript动画实例：转呀转
如何在JavaScript中实现网页的动画和特效
如何在JavaScript中实现网页的动画和特效JavaScript是一种强大的编程语言，它可以用来为网页添加动画和特效。
在本文中，我们将学习如何使用JavaScript实现网页动画和特效。
1.使用CSS动画：JavaScript可以与CSS动画配合使用，通过控制CSS属性的变化来实现动画效果。
可以通过添加或移除类来触发CSS 动画，也可以使用JavaScript直接修改CSS属性的值。
以下是一些常见的CSS属性，可以用来实现动画效果：- transform：可以利用translate、scale、rotate等函数来改变元素的位置、尺寸和旋转角度。
- opacity：可以通过改变元素的不透明度来实现淡入淡出效果。
- transition：可以使用过渡效果来平滑地改变元素的属性值。
通过在JavaScript中创建类或直接操作元素的样式，可以通过移动、旋转和改变元素的透明度来实现各种动画效果。
2.使用setTimeout和setInterval函数：JavaScript中的setTimeout和setInterval函数可以用来设置定时器，通过定时器来触发函数的执行。
在动画和特效中，可以使用setTimeout函数来延迟执行某个函数，来实现延迟效果。
setInterval函数可以用来循环执行一个函数，从而实现连续播放的效果。
3.使用requestAnimationFrame函数：requestAnimationFrame是一个优化的浏览器API，它可以在每次浏览器重绘之前调用一个回调函数，通常用于执行动画。
与setTimeout和setInterval不同，requestAnimationFrame会根据浏览器的绘制能力来调整动画的帧率，保证动画的流畅性并减少浏览器的负载。
使用requestAnimationFrame函数来调用动画函数，可以使用递归的方式来循环播放动画，通过不断更新元素的位置、尺寸和样式来实现动画效果。
JavaScript动画实例：旋转的正三角形
JavaScript动画实例：旋转的正三角形给定一个正三角形的重心坐标为（x0,y0），高为h，可以用如下的语句绘制一个底边水平的正三角形。
ctx.beginPath();ctx.moveTo(x0,y0-h*2/3);ctx.lineTo(x0+h/Math.sqrt(3), y0+h/3);ctx.lineTo(x0-h/Math.sqrt(3), y0+h/3);ctx.lineTo(x0,y0-h*2/3);ctx.closePath();ctx.stroke();给定正三角形个数count，通过循环的方式可以绘制出count个重心相同、高度不同正三角形。
编写如下的HTML代码。
<!DOCTYPE html><html><head><title>重心相同高度不同的正三角形</title></head><body><canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;"> </canvas><script type="text/javascript">var canvas=document.getElementById('myCanvas');ctx= canvas.getContext('2d');var height=360;var x0=250;var y0=(500-height)/2-(height/7)+(height*2/3);var count=4;ctx.lineWidth=1;ctx.fillStyle="#FF3388";ctx.strokeStyle="#FFFFFF";for (var i=0;i<count;i++){var nHeight = height-(height/count)*i;ctx.beginPath();ctx.moveTo(x0,y0-nHeight*2/3);ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3);ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);ctx.lineTo(x0,y0-nHeight*2/3);ctx.closePath();ctx.stroke();ctx.fill();};</script></body></html>在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图1所示的4个重心相同高度不同的正三角形。
JS关键字球状旋转效果的实例代码
JS关键字球状旋转效果的实例代码有时上⽹查资料，看到别⼈的博客上有关键字旋转的效果，觉得蛮不错的。
于是⽹上搜索了⼀下它的实现，好吧，⾃⼰动⼿写写。
HTML:复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><link rel="stylesheet" href="css/style.css" /><script type="text/javascript" src="js/lrtk.js"></script></head><body><!-- 代码开始 --><div id="div1"><a > webform</a><a > mvc</a><a >EF</a><a >Castle</a><a ></a><a >NHibernate</a><a >WCF</a><a >WPF</a><a >AOP</a><a >IoC</a><a >SQL</a><a >Javascript</a><a >Jquery</a><a >KendoUI</a></div></body></html>CSS:复制代码代码如下:#div1{height:400px;width:450px; position:relative; margin:10px auto;}#div1 a{position:absolute;top:0px;left:0px;font-weight:bold;padding:3px 6px; color:black; text-decoration: none;}#div1 a:hover{border:1px solid #eee;background:#ccc;border-radius:5px;}既然是关键字，我觉得给他们加上不同的颜⾊才够酷。
JavaScript动画实例：圆点圈旋转
JavaScript动画实例：圆点圈旋转1．一条圆点曲线按照给定的曲线方程，计算出曲线上P个点的坐标，在每个计算出的坐标点处，以该坐标点为圆心，以r为半径绘制一个实心小圆。
这p个实心小圆点可以构成一条曲线。
例如，正弦曲线的坐标方程为：Y=A*SIN(X) （A为振幅）编写如下的HTML代码。
<!DOCTYPE html><html><head><title>一条圆点曲线</title></head><body><canvas id="myCanvas" width="600" height="600" style="border:3px double;"></canvas><script>var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var w=canvas.width;var h=canvas.height;const p = 32;ctx.save();ctx.translate(w/2, h/2);ctx.fillStyle = "#f0f";for (var k = 0; k < p; k++){var alfa =(2*Math.PI/p)*k;var x0 = 8*k;var y0 = 30*Math.sin(alfa);ctx.beginPath();ctx.arc(x0, y0, 3, 0, 2*Math.PI);ctx.fill();}ctx.restore();</script></body></html>在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中绘制出如图1所示的一条由32个圆点构成的正弦曲线。
JavaScriptcanvas实现围绕旋转动画
JavaScriptcanvas实现围绕旋转动画使⽤canvas的convas来实现围绕旋转动画，外圈顺时针，⾥层逆时针代码demo链接地址：html⽂件<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>body {margin: 0;padding: 0;overflow: hidden;background-color: #f0f0f0;}</style><script src="js/konva.js"></script><script src="js/circle.js"></script></head><body><div id="cas"></div><script>var width = window.innerWidth;var height = window.innerHeight;//创建舞台var stage = new Konva.Stage({container: "cas",width: width,height: height});//创建层var layer = new yer();//创建组1var group = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});//最外层圆var circle1 = new Konva.Circle({x: 0,y: 0,radius: 250,stroke: "#ccc",strokeWidth: 1,dash: [6, 3]});group.add(circle1);//第⼆个圆var circle2 = new Konva.Circle({x: 0,y: 0,radius: 150,stroke: "#ccc",strokeWidth: 1,dash: [6, 3]});group.add(circle2);//第三个圆var circle3 = new Konva.Circle({x: 0,y: 0,radius: 135,stroke: "blue",strokeWidth: 2,dash: [10, 5]});group.add(circle3);//第四个圆var circle4 = new Konva.Circle({x: 0,y: 0,radius: 105,fill: "#ccc",opacity: 0.4});group.add(circle4);//第五个圆var circle5 = new Konva.Circle({x: 0,y: 0,radius: 80,fill: "#74A2F0"});group.add(circle5);//添加⽂字var text = new Konva.Text({x: -80,y: -12,text: "WEB全栈",fill: "white",fontSize: 24,width: 160,align: "center"});group.add(text);layer.add(group);//*****************************************************//创建组2var outGroup = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});var arrColor = ["red", "green", "blue", "orange", "purple"]; var arrText = ["web", "node.js", "ajax", "html5", "css"];for(var i = 0; i < 5; i++) {var cir = new Circle({x : 250 * Math.cos(72 * i * Math.PI / 180), //圆⼼x轴的坐标 y : 250 * Math.sin(72 * i * Math.PI / 180), //圆⼼y轴的坐标 outR : 60, //外圆的半径inR : 50, //内圆的半径fill : arrColor[i], //填充颜⾊text: arrText[i], //⽂字outOpacity : 0.3, //外圆的透明度inOpacity : 0.6 //内圆的透明度});cir.drawCircle(outGroup);}layer.add(outGroup);//***********************************************//创建组3var inGroup = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});var arrColor = ["red", "green", "blue", "orange", "purple"]; var arrText = ["web", "node.js", "ajax", "html5", "css"];for(var i = 0; i < 5; i++) {var cir = new Circle({x : 135 * Math.cos(90 * i * Math.PI / 180), //圆⼼x轴的坐标 y : 135 * Math.sin(90 * i * Math.PI / 180), //圆⼼y轴的坐标 outR : 45, //外圆的半径inR : 35, //内圆的半径fill : arrColor[i], //填充颜⾊text: arrText[i], //⽂字outOpacity : 0.3, //外圆的透明度inOpacity : 0.6 //内圆的透明度});cir.drawCircle(inGroup);}layer.add(inGroup);//************************************************//运动动画var step = 1; //转动的⾓度var anim = new Konva.Animation(function() {outGroup.rotate(step);outGroup.getChildren().each(function (ele, index) { ele.rotate(-step);});inGroup.rotate(-step);inGroup.getChildren().each(function (ele, index) { ele.rotate(step);});}, layer);anim.start();stage.add(layer);stage.on("mouseover", function () {step = 0.3;});stage.on("mouseout", function () {step = 1;});</script></body></html>js⽂件function Circle(obj) {this._init(obj);}Circle.prototype = {_init: function (obj) {this.x = obj.x, //圆⼼x轴的坐标this.y = obj.y, //圆⼼y轴的坐标this.outR = obj.outR, //外圆的半径this.inR = obj.inR, //内圆的半径this.color = obj.fill, //填充颜⾊this.text = obj.text, //内圆的⽂字this.outOpacity = obj.outOpacity, //外圆的透明度 this.inOpacity = obj.inOpacity //内圆的透明度 },drawCircle: function (group) {//创建⼀个组var groupCir = new Konva.Group({x: this.x,y: this.y});//外圆var outCir = new Konva.Circle({x: 0,y: 0,radius: this.outR,fill: this.color,opacity: this.outOpacity});groupCir.add(outCir);//内圆var inCir = new Konva.Circle({x: 0,y: 0,radius: this.inR,fill: this.color,opacity: this.inOpacity});groupCir.add(inCir);//添加⽂字var text = new Konva.Text({x: -this.inR,y: -10,text: this.text,fill: "white",fontSize: 20,width: 2 * this.inR,align: "center"});groupCir.add(text);group.add(groupCir);}}效果图⽚：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
跟我学RIA富客户端应用技术——应用JavaScript实现地球自转和月亮围绕地球旋转的动画效果应用实例
创建出地球定时器对象，每隔 300 毫秒执行一次 rotateEarth 函数 */ earthTimerObj=window.setInterval("rotateEarth();",earthTimerInterval); moonImageObjectByID=document.getElementById("moonImageID"); /*
杨教授工作室，版权所有，盗版必究， 3/28 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
下面为销毁定时器 */ function destroyTimer(){
window.clearInterval(earthTimerObj); } /*
下面为定时响应函数 */ function rotateEarth(){
</head> <body>
<img src="images/img0001.gif" id="earthImageID"> </body></html>
该页面可以利用 Adobe Dreamweaver 创建出，但需要设置页面默认的字符集为中文字符 集。
（2）CSS 样式单文件 @charset "utf-8"; body {
杨教授工作室，版权所有，盗版必究， 1/28 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 动画示例页面</title> <link href="css/earthImage.css" rel="stylesheet" type="text/css" />
JavaScript动画实例：动感小球
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代码。
<!DOCTYPE html><html><head><title>绕圆周旋转的小球</title></head><body><canvas id="myCanvas" width="500" height="400" style="border:3px double #996633;"> </canvas><script type="text/javascript">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;}</script></body></html>在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图1所示绕圆周旋转的小球。
解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑：如何使⽤html+css+js实现旋转相册，⽴⽅体相册等动画效果解惑：如何使⽤html+css+js实现旋转相册，⽴⽅体相册等动画效果⼀、前⾔最初还是在抖⾳上看到可以使⽤简单地代码实现炫酷的⽹页效果的，但是想要找到可以运⾏的代码还是⽐较困难的，最近突然想起就在⽹上汇总了⼀些这样的代码。
⼆、3D效果代码2.1、旋转相册<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>旋转相册</title><style type="text/css">body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{margin:0;padding:0;}body{background: black;}.content{width: 200px;height: 150px;position: relative;margin:200px auto 0;perspective: 1500px;}.box{width: 200px;height: 150px;transform-style: preserve-3d;transform:rotateX(-30deg);animation:photo 15s linear infinite;}.box:hover{animation:photo 15s linear infinite paused;}.box img{width: 200px;height: 150px;position: absolute;left: 0;top: 0;transform-style: preserve-3d;transition: all 1s;}.box img:nth-child(1){transform:translateZ(280px);}.box img:nth-child(2){transform:rotateY(40deg) translateZ(280px);}.box img:nth-child(3){transform:rotateY(80deg) translateZ(280px);}.box img:nth-child(4){transform:rotateY(120deg) translateZ(280px);}.box img:nth-child(5){transform:rotateY(160deg) translateZ(280px);}.box img:nth-child(6){transform:rotateY(200deg) translateZ(280px);}.box img:nth-child(7){transform:rotateY(240deg) translateZ(280px);}.box img:nth-child(8){transform:rotateY(280deg) translateZ(280px);}.box img:nth-child(9){transform:rotateY(320deg) translateZ(280px);}.box img:nth-child(1):hover{transform:translateZ(280px) scale(1.2);}.box img:nth-child(2):hover{transform:rotateY(40deg) translateZ(280px) scale(1.2); }.box img:nth-child(3):hover{transform:rotateY(80deg) translateZ(280px) scale(1.2); }.box img:nth-child(4):hover{transform:rotateY(120deg) translateZ(280px) scale(1.2); }.box img:nth-child(5):hover{transform:rotateY(160deg) translateZ(280px) scale(1.2); }.box img:nth-child(6):hover{transform:rotateY(200deg) translateZ(280px) scale(1.2); }.box img:nth-child(7):hover{transform:rotateY(240deg) translateZ(280px) scale(1.2); }.box img:nth-child(8):hover{transform:rotateY(280deg) translateZ(280px) scale(1.2); }.box img:nth-child(9):hover{transform:rotateY(320deg) translateZ(280px) scale(1.2); }@keyframes photo{0%{transform:rotateX(-30deg) rotateY(0deg);}100%{transform:rotateX(-30deg) rotateY(360deg);}}</style></head><body><div class="content"><div class="box"><img src="images/1.png" alt=""/><img src="images/2.png" alt=""/><img src="images/3.png" alt=""/><img src="images/4.png" alt=""/><img src="images/5.png" alt=""/><img src="images/6.png" alt=""/><img src="images/7.png" alt=""/><img src="images/8.png" alt=""/><img src="images/9.png" alt=""/></div></div></body></html>2.2、旋转魔⽅<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"> <style>ul{list-style-type: none;margin: 0;padding: 0;}.box{width: 300px;height: 300px;margin: 150px auto;position: relative;font-size: 50px;transform-style: preserve-3d;/*动画效果*/animation: rotate 10s linear infinite;}.box>div{width: 300px;height: 300px;position: absolute;}li{float: left;width: 90px;height: 90px;margin: 5px;border-radius: 20px;line-height: 90px;text-align: center;}.dv1 li{background-color: orange;transform: skewZ(60deg);}.dv1{background-color: transparent;transform: rotateY(90deg) translateZ(150px);}.dv2{background-color: transparent;transform: rotateY(-90deg) translateZ(150px);}.dv3{background-color: transparent;transform: rotateX(90deg) translateZ(150px);}.dv4{background-color: transparent;transform: rotateX(-90deg) translateZ(150px);}.dv5{background-color: transparent;transform:translateZ(150px);}.dv6{background-color: transparent;transform:translateZ(-150px);}.dv2 li{background-color: green;}.dv3 li{background-color: greenyellow;}.dv4 li{background-color: palevioletred;}.dv5 li{background-color: pink;}.dv6 li{background-color: yellow;}@keyframes rotate{0%{transform: rotateY(0deg) rotateX(0deg);}100%{transform: rotateY(135deg) rotateX(45deg); }}</style></head><body><div class="box"><div class="dv1"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv2"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv3"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv4"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv5"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv6"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></div></body></html>2.3 旋转⽴⽅体相册<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><link type="text/css" href="./css/3.css" rel="stylesheet "> <title>旋转⽴⽅体相册</title></head><body><div id="react"><div class="out_front"><img src="./images/1.png" class="out_pic"></div><div class="out_back"><img src="./images/2.png" class="out_pic"></div><div class="out_left"><img src="./images/3.png" class="out_pic"></div><div class="out_right"><img src="./images/4.png" class="out_pic"></div><div class="out_top"><img src="./images/5.png" class="out_pic"></div><div class="out_bottom"><img src="./images/6.png" class="out_pic"></div><span class="in_front"><img src="./images/7.png" class="in_pic"></span><span class="in_back"><img src="./images/8.png" class="in_pic"></span><span class="in_left"><img src="./images/9.png" class="in_pic"></span><span class="in_right"><img src="./images/10.png" class="in_pic"></span><span class="in_top"><img src="./images/11.png" class="in_pic"></span><span class="in_bottom"><img src="./images/12.png" class="in_pic"></span></div></body></html>3.css⽂件：<pre name="code" class="css">*{padding:0;margin:0;}body{width:100%;height:100%;background:linear-gradient(darkred 0%,black 100%); }#react{width: 200px;height:200px;margin: 200px auto;transform-style:preserve-3d;animation:rotate 20s infinite;animation-timing-function: linear;}#react div{position:absolute;transition: all .4s;}div .out_pic{width:200px;height:200px;opacity:0.9;}div .in_pic{width:100px;height:100px;}#react span{display:block;position:absolute;width:100px;height:100px;top:50px;left:50px;}@keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}.out_front{transform:translateZ(100px);}.out_back{transform:translateZ(-100px);}.out_left{transform:rotateY(90deg) translateZ(100px);}.out_right{transform: rotateY(-90deg) translateZ(100px);}.out_top{transform:rotateX(90deg) translateZ(100px);}.out_bottom{transform: rotateX(-90deg) translateZ(100px);}.in_front{transform:translateZ(50px);}.in_back{transform:translateZ(-50px);}.in_left{transform:rotateY(90deg) translateZ(50px);}.in_right{transform: rotateY(-90deg) translateZ(50px);}.in_top{transform:rotateX(90deg) translateZ(50px);}.in_bottom{transform: rotateX(-90deg) translateZ(50px);}/*外⾯的图⽚散开*/#react:hover .out_front{transform:translateZ(200px);}#react:hover .out_back{transform:translateZ(-200px);}#react:hover .out_left{transform:rotateY(90deg) translateZ(200px); }#react:hover .out_right{transform: rotateY(-90deg) translateZ(200px); }#react:hover .out_top{transform:rotateX(90deg) translateZ(200px); }#react:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px); }/*⾥⾯的图⽚散开*/#react:hover .in_front{transform:translateZ(100px);}#react:hover .in_back{transform:translateZ(-100px);}#react:hover .in_left{transform:rotateY(90deg) translateZ(100px); }#react:hover .in_right{transform: rotateY(-90deg) translateZ(100px); }#react:hover .in_top{transform:rotateX(90deg) translateZ(100px); }#react:hover .in_bottom{transform: rotateX(-90deg) translateZ(100px); }@charset "utf-8";/* CSS Document */2.4 动态魔⽅<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS3 魔⽅</title><!-- 样式部分全写这⾥ --><style>.wrap {transform-style: preserve-3d;width: 300px; height: 300px;position: relative; /* 定位起点元素 */border-top:solid 1px gray; /* x 轴 */border-left:solid 1px gray; /* y 轴 *//* 倾斜⼀点⽅能见⽴体效果 */transform: rotateX(-30deg) rotateY(-30deg); }/* z 轴正⽅向 */.zaxis_p {position:absolute;width : 300px;height:1px;border-top:solid 1px gray;/* xy⾯上，90度⽴起来就是 z */transform: rotateY(-90deg);/* ⽴起来的旋转点 */transform-origin:0 0 0;}/* z 轴负⽅向 */.zaxis_n {position:absolute;width : 300px;height:1px;border-top:dashed 1px gray; /*（虚线）*/transform: rotateY(90deg);transform-origin:0 0 0;}.block {position: absolute;margin: 0 auto;border:solid 2px black;border-radius:3px;/* 宽⾼包含边框 */box-sizing:border-box;transform-origin:0 0 0;}.cube {position: absolute;/* ⼦元素版⾯是需要三维空间的 */transform-style: preserve-3d;}.magicBox {position: absolute;transform-style: preserve-3d;}</style><script>/** 版⾯ block 类* direct ⽅向* color 颜⾊* size 边长⼤⼩**/function Block(direct, color, size){this.direct = direct;this.color = color;this.size = size;// 绘制过的 UI 元素对象this.Element = null;// 在⽗容器中绘制this.DrawIn = function(cubeElement){var e = this.Element || document.createElement('div');e.style.width = this.size + "px";e.style.height = this.size + "px";var top = (this.direct == 'down' ? this.size : 0);var left = (this.direct == 'right' ? this.size : 0);e.style.top = top + "px";e.style.left = left + "px";e.style.backgroundColor = this.color;var rx = (this.direct == 'up' || this.direct == 'down' ? -90 : 0);var ry = (this.direct == 'left' || this.direct == 'right' ? 90 : 0);;var tz = (this.direct == 'back' ? this.size : 0);e.style["transform"] = "rotateX(" + rx + "deg) rotateY(" + ry + "deg) translateZ(-" + tz + "px)";e.className = "block";this.Element = e;cubeElement.appendChild(e);};}/** 魔⽅格 Cube 类* blockSize 为魔⽅格的边长代表⼤⼩* directColorArray 为指定⽅向与颜⾊的数组* 形式为 [direct,color,direct,color,...]* x,y,z 为在魔⽅中的坐标，未指定时默认为0,0,0**/function Cube(blockSize, directColorArray, x, y, z){this.x = x | 0;this.y = y | 0;this.z = z | 0;this.blockSize = blockSize;this.blocks = [];/* 根据参数建⽴ Block 对象 */for(var i=0; i < directColorArray.length / 2; i++){this.blocks.push(new Block(directColorArray[ i*2 ], directColorArray[ i*2 + 1 ], this.blockSize)); }// 绘制过的 UI 元素对象this.Element = null;// 在⽗容器中绘制this.DrawIn = function(boxElement, x, y, z){this.x = x | this.x;this.y = y | this.y;this.z = z | this.z;var e = this.Element || document.createElement('div');e.style.width = this.blockSize + "px";e.style.height = this.blockSize + "px";e.style["transform"] = this.FormatTransform();e.className = "cube";for(var i=0; i < this.blocks.length; i++) {this.blocks[i].DrawIn(e);}this.Element = e;boxElement.appendChild(e);};this.Rotate = function(axis, turn, dimension){if(!this.Element) return;// 重绘魔⽅格this.ReDrawBlocks(axis, turn);// 转换坐标this.TransCoordinate(axis, turn, dimension);// 先停⽌动画效果，逆向 90 度，此时外观跟旋转前⼀致this.Element.style["transition"] = "";var rotateDegs = new Object();rotateDegs[axis] = (turn == 'left' ? -90 : 90);this.Element.style["transform"] = this.FormatTransform(rotateDegs);// 旋转原点旋转的层都需要以魔⽅的中⼼点旋转// 旋转原点是以元素⾃⾝来计算的，因所有魔⽅格都是从(0,0,0)平衡的，因此计算结果都⼀样 var centerX = this.blockSize * dimension / 2;var centerY = this.blockSize * dimension / 2;var centerZ = -this.blockSize * dimension / 2;this.Element.style["transformOrigin"] = centerX + "px " + centerY + "px " + centerZ + "px";// 这样才能触发动画setTimeout(function(obj){return function(){obj.Element.style["transform"] = obj.FormatTransform();obj.Element.style["transition"] = "transform 0.5s"; // 0.3 秒};}(this), 1);}/** 坐标转换* axis 轴向* turn 转向* dimension 阶数**/this.TransCoordinate = function(axis, turn, dimension){if(axis == 'x'){if( turn == 'left' ){var oriy = this.y;this.y = this.z;this.z = dimension - 1 - oriy;} else {var oriz = this.z;this.z = this.y;this.y = dimension - 1 - oriz;}} else if(axis == 'y'){if( turn == 'right' ){var orix = this.x;this.x = this.z;this.z = dimension - 1 - orix;} else {var oriz = this.z;this.z = this.x;this.x = dimension - 1 - oriz;}} else if(axis == 'z'){if( turn == 'right' ){var orix = this.x;this.x = this.y;this.y = dimension - 1 - orix;} else {var oriy = this.y;this.y = this.x;this.x = dimension - 1 - oriy;}}}/** 将各 block 调整位置，重绘魔⽅格* axis 轴向* turn 转向**/this.ReDrawBlocks = function(axis, turn){var xyzDirects = [];xyzDirects['x'] = ["front", "up", "back", "down"];xyzDirects['y'] = ["front", "right", "back", "left"];xyzDirects['z'] = ["up", "right", "down", "left"];var curDirects = xyzDirects[axis];for(var i=0; i < this.blocks.length; i++) {var index = curDirects.indexOf( this.blocks[i].direct );if(index > -1){var newIndex = turn == 'left' ? (index + 1) % 4 : (index + 4 - 1) % 4;this.blocks[i].direct = curDirects[newIndex];this.blocks[i].DrawIn(this.Element);}}}// 格式仳 transform 属性// css3 把旋转与平移混⼀起（真不好⽤）this.FormatTransform = function (rotateDegs){var rotatePart = "rotateX(0deg) rotateY(0deg) rotateZ(0deg)";if(rotateDegs){rotatePart = "rotateX(" + (rotateDegs.x | 0) + "deg) rotateY(" + (rotateDegs.y | 0) + "deg) rotateZ(" + (rotateDegs.z | 0) + "deg)";}return rotatePart + " translate3d(" + (this.x * this.blockSize) + "px," + (this.y * this.blockSize) + "px,-" + (this.z * this.blockSize) + "px) "; }}/** 魔⽅ MagicBox 类* dimension 阶数* blockSize 每⼩格⼤⼩**/function MagicBox(dimension, blockSize){this.dimension = dimension;this.blockSize = blockSize;this.cubes = [];this.MakeDefaultCubes = function(){this.cubes = [];for(var x=0; x < this.dimension; x++){for(var y=0; y < this.dimension; y++){for(var z=0; z < this.dimension; z++){var cube = this.MakeDefaultCube(x, y, z);if(cube){this.cubes.push(cube);}}}}};/* 根据魔⽅格在阶数中的位置⽣成魔⽅格，魔⽅内部的格⼦忽略 */this.MakeDefaultCube = function(x, y, z){var max = this.dimension - 1;var dc = [];if(x == 0) dc.push("left", "orange"); else if(x == max) dc.push("right", "red");if(y == 0) dc.push("up", "yellow"); else if(y == max) dc.push("down", "white");if(z == 0) dc.push("front", "blue"); else if(z == max) dc.push("back", "green");if(dc.length == 0) return null;var cube = new Cube(this.blockSize, dc, x, y, z);return cube;}// 构造时⾃动产⽣初始魔⽅格this.MakeDefaultCubes();// 绘制过的 UI 元素对象this.Element = null;// 在⽗容器中绘制this.DrawIn = function(domElement){var e = this.Element || document.createElement('div');e.style.width = (this.dimension * this.blockSize) + "px";e.style.height = (this.dimension * this.blockSize) + "px";e.className = "magicBox";for(var i=0; i < this.cubes.length; i++) {this.cubes[i].DrawIn(e);}this.Element = e;domElement.appendChild(e);};/** MagicBox.Rotate 旋转* axis 轴向* level 层* turn 转向**/this.Rotate = function(axis, level, turn){for(var i=0; i < this.cubes.length; i++) {if(this.cubes[i][axis] == level) { // 该轴该层的才旋转this.cubes[i].Rotate(axis, turn, this.dimension);}}};}function onload(){//* 魔⽅绘制⽰例var magicBox = new MagicBox(3, 50);magicBox.DrawIn( document.querySelector(".wrap") );var rotates = GenRotateActions(3, 5);for(var i=0; i<rotates.length; i++){setTimeout(function(magicBox, rotate){return function(){magicBox.Rotate(rotate.axis, rotate.level, rotate.turn);};}(magicBox, rotates[i]), 3000 + 800 * i);}for(var i=0; i<rotates.length; i++){setTimeout(function(magicBox, rotate){return function(){magicBox.Rotate(rotate.axis, rotate.level, (rotate.turn == 'left' ? 'right' : 'left')); };}(magicBox, rotates[rotates.length -1 - i]), 1000 + 8800 + 800 * i);}}/** 产⽣⼀个指定数量的旋转序列数组* dimension 魔⽅阶数* count 序列数量**/function GenRotateActions(dimension, count){var result = [];for(var i=0; i<count; i++){result[i] = {axis : ['x','y','z'][Math.floor(Math.random() * 3)],level : Math.floor(Math.random() * dimension),turn : ['left','right'][Math.floor(Math.random() * 2)]};}return result;}</script></head><body style="padding:300px;" onload="onload()"><div class="wrap"><div class="zaxis_p"></div><div class="zaxis_n"></div></div></body></html>2.5 ⼆⼗⾯体<html><head><title>⼆⼗⾯体</title><style type="text/css">html, body {height: 100%;margin: 0;background: rgba(0, 0, 0,1);}.sharp {animation: ani 4s linear infinite;}div {transform-style: preserve-3d;transform: translate(-50%, -50%) rotate3d(0, 1, 0, 72deg);position: absolute;left: 50%;top: 50%;}span { /*利⽤边框做⼀个三⾓形*/border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每个span下⽅设置颜⾊，其余边透明*/ border-width: 173.2px 100px;border-style: solid;width: 0;height: 0;position: absolute;left: 50%;margin-left: -100px;top: 50%;margin-top: -346.4px;}span:before { /*利⽤边框在span中做⼀个三⾓形，实现嵌套，让span变成边框,span:before变成要显⽰的东西*/ content: '';border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*设置每⾯的颜⾊*/border-width: 165.2px 92px;border-style: solid;width: 0;height: 0;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);margin-top: 4px;}div span:nth-child(1) {transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg);}div span:nth-child(2) {transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg);}div span:nth-child(3) {transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg);}div span:nth-child(4) {transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg);}div span:nth-child(5) {transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg);}.sharp div:nth-child(1) {transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(2) {transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(3) {transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(4) {transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(5) {transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px); }@keyframes ani {100% {transform: rotateY(360deg);}}</style></head><body><div class="sharp"><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div></div></body></html>2.6 3D相册拖拽动画<!DOCTYPE HTML><html onselectstart='return false'><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="keywords" content="" /><meta name="description" content="" /><title>3D相册拖拽动画</title><style type="text/css">*{ margin:0; padding:0;}body{ background:#000; width:100%; height:100%; overflow:hidden}#wrap{ width:133px; height:200px; margin:25% auto 0;position:relative;top:-100px;transform-style:preserve-3d;transform:perspective(800px) rotateX(-10deg) rotateY(0deg);}#wrap ul li{list-style:none;width:120px;height:120px;position:absolute;top:0;left:0;border-radius:3px;box-shadow:0 0 10px #fff;background-size:100%;transform:rotateY(0deg) translateZ(0px);-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%); }#wrap p{ width:1200px; height:1200px; position:absolute; border-radius:100%;left:50%; top:100%; margin-left:-600px; margin-top:-600px;background:-webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));transform:rotateX(90deg);}</style></head><body><div id="wrap"><ul><li style="background-image:url(images/1.png);"></li><li style="background-image:url(images/2.png);"></li><li style="background-image:url(images/3.png);"></li><li style="background-image:url(images/4.png);"></li><li style="background-image:url(images/5.png);"></li><li style="background-image:url(images/6.png);"></li><li style="background-image:url(images/7.png);"></li><li style="background-image:url(images/8.png);"></li><li style="background-image:url(images/9.png);"></li><li style="background-image:url(images/10.png);"></li><li style="background-image:url(images/11.png);"></li></ul><p></p></div><script src="./js/jquery-1.8.3.js"></script><script>$(function(){var oL = $('#wrap ul li').size();var Deg = 360/oL;var xDeg = 0,yDeg = -10,xs,ys,p=null;for (var i=oL-1;i>=0;i--){$('#wrap ul li').eq(i).css({transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",。
JavaScript动画实例：线条的旋转
JavaScript动画实例：线条的旋转1．一个圆点的圆周运动设平面上有一点P1(x1,y1)，则P1与原点（0,0）的距离的平方为x12+y12。
将P1点坐标按下面的公式进行变换，得到一个新的坐标点P2x2=cos(dlt)*x1-sin(dlt)*y1y2=sin(dlt)*x1+cos(dlt)*y1点P2与原点（0,0）的距离的平方为x22+y22= [cos(dlt)*x1-sin(dlt)*y1]2+[sin(dlt)*x1+cos(dlt)*y1]2=[cos(dlt)*x1]2-2*cos(dlt)*x1*sin(dlt)*y1+[sin(dlt)y1]2+[sin(dlt)x1]2+2*cos(dlt)*x1*sin(dlt)*y1+[cos(dlt)*y1]2= x12+y12显然，点P1和点P2同位于圆心为（0,0），半径为sqrt(x12+y12)的圆周上。
以坐标（x1，y1）为圆心绘制一个半径为4的小实心圆点，之后不断地按上面的变换公式，由上一个坐标计算出下一个新坐标，再以新坐标为圆心绘制一个半径为4的小实心圆点，则小实心圆点连接为1个圆周。
若绘制下一个小实心圆点前清屏，则呈现小实心圆点的圆周运动动画效果。
编写如下的HTML代码。
<!DOCTYPE html><html><head><title>一个小圆点的圆周运动</title></head><body><canvas id="myCanvas" style="background-color:rgba(102,237,253,1);"></canvas><script>var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var w, h;w = canvas.width = window.innerWidth;h = canvas.height = window.innerHeight;var x1=80;var y1=0;ctx.translate(w / 2, h / 2);function draw(){requestAnimationFrame(draw);ctx.clearRect(-w/2, -h/2, w, h);ctx.strokeStyle="red";ctx.beginPath();ctx.arc(0, 0,80, 0, Math.PI * 2);ctx.stroke();ctx.fillStyle="white";ctx.beginPath();ctx.arc(x1, y1, 4, 0, Math.PI * 2);ctx.fill();var delta = 0.05;var x2 = Math.cos(delta) * x1 - Math.sin(delta) * y1;var y2 = Math.sin(delta) * x1 + Math.cos(delta) * y1;x1 = x2;y1 = y2;}draw();</script></body></html>在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中呈现出如图1所示的动画效果。
JavaScript中的动画效果和交互设计
JavaScript中的动画效果和交互设计JavaScript是一种强大的脚本语言，广泛应用于Web开发中，它能够创建丰富的动画效果和交互设计。
本文将重点介绍JavaScript中的动画效果和交互设计，并详细探讨它们的实现方式和应用场景。
动画效果是网页设计中至关重要的一部分，它能够吸引用户的注意力，并且提升用户体验。
使用JavaScript可以实现多种动画效果，如淡入淡出、滑动、旋转、缩放等。
下面我们将逐一介绍这些动画效果的实现方式。
淡入淡出效果是一种常见的动画效果，它可以使元素逐渐显示或隐藏。
使用JavaScript可以通过改变元素的透明度来实现淡入淡出效果。
可以使用JavaScript内置的fadeIn和fadeOut函数来实现淡入淡出效果，也可以使用CSS3的transition属性来实现。
滑动效果是指元素在页面中平滑地移动。
使用JavaScript可以通过改变元素的位置属性来实现滑动效果。
可以使用JavaScript内置的animate函数来实现滑动效果，也可以使用CSS3的transition和transform属性来实现。
旋转效果是指元素在页面中以某个中心点旋转。
使用JavaScript可以通过改变元素的旋转属性来实现旋转效果。
可以使用JavaScript内置的rotate函数来实现旋转效果，也可以使用CSS3的transform属性来实现。
缩放效果是指元素在页面中逐渐放大或缩小。
使用JavaScript可以通过改变元素的缩放属性来实现缩放效果。
可以使用JavaScript内置的scale函数来实现缩放效果，也可以使用CSS3的transform属性来实现。
除了上述基本的动画效果，JavaScript还可以用于实现复杂的交互设计。
比如，可以使用JavaScript来处理用户的鼠标事件和键盘事件，从而实现各种交互效果。
可以使用JavaScript内置的事件监听函数来监听用户的操作，并执行相应的操作。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript动画实例：转呀转在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法：void rotate(in float angle); // 按给定的弧度顺时针旋转anglerotate（）方法旋转的中心始终是canvas的原点。
如果要改变旋转中心，需要使用translate 方法。
我们可以将绘制的图形每隔一定的时间间隔后，旋转一定的角度重新绘制一次，这样就可以得到旋转的动画效果。
1．旋转的扇叶将一个梯形按顺时针旋转90°的方式绘制4次，可以绘制出一个扇叶图案。
将绘制的扇叶图案每隔0.1秒后顺时针旋转12°，重新绘制一遍，得到旋转的扇叶动画。
编写如下的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');i=3;setInterval(move,100);}function move(){context.clearRect(0,0,400,300);context.save();context.fillStyle = 'green';context.translate(100,100);context.rotate(i*Math.PI/45)drawLeaf();i+=3;if (i>=90) i=3;context.restore();}function drawLeaf() // 绘制扇叶{context.save();for (var j=0;j<4;j++){context.rotate(Math.PI/2);context.beginPath();context.moveTo(-20,-80);context.lineTo(0,-80);context.lineTo(0,0);context.lineTo(-30,0);context.closePath();context.fill();}context.restore();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="200" height="200" style="border:3px double #996633;"> </canvas></body></html>将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以在浏览器窗口中看到扇叶的旋转动画，如图1所示。
图1 旋转的扇叶2．旋转的五角星将绘制的五角星图案每隔0.1秒后顺时针旋转12°，重新绘制一遍，得到旋转的五角星动画。
编写如下的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');i=3;setInterval(move,100);}function move(){context.clearRect(0,0,400,300);context.save();context.fillStyle = 'green';context.translate(100,100);context.rotate(i*Math.PI/45)drawStar(80);i+=3;if (i>=90) i=3;context.restore();}function drawStar(r) // 绘制五角星图案{context.save();context.fillStyle="red";context.beginPath();context.moveTo(r,0);for (var i=0;i<9;i++){context.rotate(Math.PI/5);if(i%2 == 0)context.lineTo((r/2),0);elsecontext.lineTo(r,0);}context.closePath();context.fill();context.restore();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="200" height="200" style="border:3px double #996633;"> </canvas></body></html>将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以在浏览器窗口中看到五角星的旋转动画，如图2所示。
图2 旋转的五角星3．旋转的正六边形漩涡我们先来画一个正六边形。
这样作图，设从起点向绘图方向画一条长为i的线段，将线段的终点设为新的起点，同时绘图方向旋转60°，再画一条长为i+1的线段，重复这样的过程共绘制六条线段，则这六条线段构成一个正六边形。
编写HTML文件内容如下。
<!DOCTYPE html><head><title>正六边形</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,400,400);context.translate(canvas.width/2, canvas.height/2);var colors = ['red','yellow', 'green', 'cyan','blue', 'purple' ];for (i =150; i < 156; i++){context.strokeStyle = colors[i % 6];context.lineWidth = 2;context.beginPath();context.moveTo(0, 0);context.lineTo(0, i/2);context.stroke();context.translate(0, i/2);context.rotate(-60 * (2 * Math.PI / 360));}}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;"> </canvas></body></html>将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以在画布中绘制一个正六边形图案，如图3所示。
图3 一个正六边形绘制图3的程序中，循环进行了6次，只绘制6条边。
若修改“for (i =150; i < 156; i++)”语句为“for (i =150; i < 180; i++)”，使得循环进行30次，则在画布中绘制出如图4所示的图案，该图案有5个六边形围成。
若修改语句为“for (i =0; i < 360; i++)”，则在画布中绘制出如图5所示的六边形图案。
图4 5个六边形围成的图案图5 正六边形生成图5图案的程序中，绘图时旋转的角度为60°，若将旋转角度改成59°，即将语句“context.rotate(-60 * (2 * Math.PI / 360));”修改为“context.rotate(-59 * (2 * Math.PI / 360));”，则在画布中绘制出如图6所示的正六边形漩涡。
图6 正六边形漩涡将图6的正六边形漩涡旋转起来。
编写如下的HTML文件。
<!DOCTYPE html><head><title>旋转的正六边形漩涡</title><script type="text/javascript">var context;var count;function draw(id){var canvas = document.getElementById(id);if (canvas == null)return false;context = canvas.getContext('2d');count=3;setInterval(move,100);}function move(){context.clearRect(0,0,400,400);context.save();context.translate(200, 200);context.rotate(count*Math.PI/45)drawSix();count+=3;if (count>=90) count=3;context.restore();}function drawSix() // 绘制正六边形漩涡图案{context.save();var colors = ['red','yellow', 'green', 'cyan','blue', 'purple' ];for (i = 0; i < 360; i++){context.strokeStyle = colors[i % 6];context.lineWidth = i / 200 + 1;context.beginPath();context.moveTo(0, 0);context.lineTo(0, i/2);context.stroke();context.translate(0, i/2);context.rotate(-59 * (2 * Math.PI / 360));}context.restore();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;"> </canvas></body></html>将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以在浏览器窗口中看到正六边形漩涡的旋转动画，如图7所示。