表格

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>表格</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <table border = "1px">
 9         <tr>
10             <td>A1</td>
11             <td>B1</td>
12             <td>C1</td>
13         </tr>
14         <tr>
15             <td>A2</td>
16             <td>B2</td>
17             <td>C2</td>
18         </tr>
19         <tr>
20             <td>A3</td>
21             <td>B3</td>
22             <td>C3</td>
23         </tr>
24         <tr>
25             <td>A4</td>
26             <td>B4</td>
27             <td>C4</td>
28         </tr>
29     </table>
30 </body>
31 </html>

 


澳门微尼斯人手机版 1


 

HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了。HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一块画布,我们可以通过调用脚本在Canvas上绘制任意形状,甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子,这些例子都非常适合大家学习。

  使用上一篇文章(  

创建普通表格

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>创建普通表格</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>一列:</h4>
 9     <table border = "1px">
10         <tr>
11             <td>100</td>
12         </tr>
13     </table>
14     <h4>一行三列:</h4>
15     <table border = "1px">
16         <tr>
17             <td>100</td>
18             <td>200</td>
19             <td>300</td>
20         </tr>
21     </table>
22     <h4>两行三列:</h4>
23     <table border = "1px">
24         <tr>
25             <td>100</td>
26             <td>200</td>
27             <td>300</td>
28         </tr>
29         <tr>
30             <td>400</td>
31             <td>500</td>
32             <td>600</td>
33         </tr>
34     </table>
35 </body>
36 </html>

 


 澳门微尼斯人手机版 2


1、HTML5 Canvas高空瀑布下落湖面动画

HTML5 Canvas是一个神奇的网页技术,我们在Canvas画布上可以做任何有趣的事情。今天要分享的这款瀑布动画就是利用了HTML5
Canvas的相关特性实现的。记得我们在很早以前给大家介绍过一个超逼真的HTML5瀑布动画,也是在Canvas上完成的,非常酷。今天的这个瀑布更加美妙,因为它模拟了整个瀑布落入湖面的美妙景象,但是从逼真度上来说,还是稍微有待改进,不过个人觉得已经非常不错了。

澳门微尼斯人手机版 3

在线演示 
  源码下载

  我们首先对3D模型的轮廓进行估计,然后制作一个拥有足够多顶点的、与模型轮廓近似的网格对象(这里选用条带类网格对象),接着对网格的部分顶点进行位置变换以产生模型的细节,最后为模型设置一个材质。

创建一个带有标题的表格

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>创建一个带有标题的表格</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>带有标题的表格</h4>
 9     <table border = "3px">
10         <caption>数据统计表</caption>
11         <tr>
12             <td>100</td>
13             <td>200</td>
14             <td>300</td>
15         </tr>
16         <tr>
17             <td>400</td>
18             <td>500</td>
19             <td>600</td>
20         </tr>
21     </table>
22 </body>
23 </html>

 


澳门微尼斯人手机版 4


 

2、HTML5/CSS3 3D雷达扫描动画

之前我们分享过一款纯CSS3雷达扫描模拟动画,看起来十分炫酷。这次我们分享的另外一款雷达动画更加让人震撼,它是基于HTML5和CSS3实现,它的一大特点是3D立体的视觉效果,鼠标点击雷达后将会展现一张3D立体地图,并且对地图上指定的几个地点进行坐标详细信息描述。

澳门微尼斯人手机版 5

在线演示 
  源码下载

  当然Babylon.js还支持更复杂的纹理类型,我翻译了Babylon.js官方教程中关于反射与折射,反射探查,地图纹理,多重材质,动态纹理,高亮描边的文档(部分文档翻译的不明确,因为官方文档本身的表述也不是很明确),可以在

编辑表格

给表格设置边框类型、设置表格的表头、合并单元格等。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>编辑表格</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>普通边框</h4>
 9     <table border = "1px">
10         <tr>
11             <td>First</td>
12             <td>Row</td>
13         </tr>
14         <tr>
15             <td>Second</td>
16             <td>Row</td>
17         </tr>
18     </table>
19     <h4>加粗边框</h4>
20     <table border = "5px">
21         <tr>
22             <td>First</td>
23             <td>Row</td>
24         </tr>
25         <tr>
26             <td>Second</td>
27             <td>Row</td>
28         </tr>
29     </table>
30 </body>
31 </html>

 


澳门微尼斯人手机版 6


3、HTML5 Canvas 图片粒子沙漏动画

之前我们分享过很多款炫酷的HTML5 Canvas粒子动画,比如这款HTML5 Canvas
多种炫酷3D粒子图形动画和HTML5
Canvas文字粒子动画就都非常不错。这次我们要给大家带来的是一款基于HTML5
Canvas的图片粒子沙漏动画,主要是将一张图片打散成粒子,然后模拟沙漏将图片粒子掉落下来。

澳门微尼斯人手机版 7

在线演示 
  源码下载

  1、从顶部看,估计飞船的首尾长度为30单位,船体最宽处半径为7单位,船头处呈圆滑的锥形;从船头方向看,船体顶部为较扁的圆弧,船底部边缘圆滑中间平直(有点像上个世纪的航天飞机)。草图如下:

定义表格的表头

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>定义表格的表头</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>水平的表头</h4>
 9     <table border = "1px">
10         <tr>
11             <th>姓名</th>
12             <th>性别</th>
13             <th>电话</th>
14         </tr>
15         <tr>
16             <td>小丽</td>
17             <td>女</td>
18             <td>123456</td>
19         </tr>
20     </table>
21     <h4>垂直的表头</h4>
22     <table border = "1px">
23         <tr>
24             <th>姓名</th>
25             <td>小丽</td>
26         </tr>
27         <tr>
28             <th>性别</th>
29             <td>女</td>
30         </tr>
31         <tr>
32             <th>电话</th>
33             <td>123456</td>
34         </tr>
35     </table>
36 </body>
37 </html>

 


 

澳门微尼斯人手机版 8


4、HTML5 Canvas火焰文字动画特效

HTML5技术确实挺强大的,特别是Canvas画布更是让网页动画变得丰富多彩。今天我们分享的是一款基于HTML5
Canvas的火焰文字动画特效,它可以让任意文字上方冒出密集的火焰,就像这些文字在熊熊燃烧一样。与这款火焰动画类似的还有以前分享的HTML5
Canvas幻彩火焰文字特效。

澳门微尼斯人手机版 9

在线演示 
  源码下载

澳门微尼斯人手机版 10

 设置表格背景

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>设置表格背景</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>背景颜色:</h4>
 9     <table border = "1px" bgcolor = "red">
10         <tr>
11             <td>100</td>
12             <td>200</td>
13         </tr>
14         <tr>
15             <td>300</td>
16             <td>400</td>
17         </tr>
18     </table>
19 </body>
20 </html>

 


澳门微尼斯人手机版 11


5、HTML5 WebGL粒子爆炸动画

之前我们分享过几款非常炫酷的HTML5粒子动画,比如这款HTML5像素粉碎图片动画和HTML5
Canvas彩色像素进度条动画,都是利用了HTML5的粒子渲染特性实现。今天我们要分享另外一款基于HTML5和WebGL的粒子爆炸动画特效,效果非常令人震撼。

澳门微尼斯人手机版 12

在线演示 
  源码下载

  对于船体上部,高度低于2的部分直接使用半径为7的圆弧作为仓壁,高于2的部分则将高度削减二分之一;对于船体下部,将大致形状设为压扁到四分之一的半圆,再将高度低于-1的部分设为平直的船底。

 设置表格背景图片

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>定义表格背景图片</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>表格背景图片</h4>
 9     <table border = "1px" background = "1.png">
10         <tr>
11             <td>100</td>
12             <td>200</td>
13         </tr>
14         <tr>
15             <td>300</td>
16             <td>400</td>
17         </tr>
18     </table>
19 </body>
20 </html>

 


澳门微尼斯人手机版 13


6、超炫酷HTML5 Canvas蝴蝶飞舞动画

还记得很早以前我们为大家分享过一款非常炫酷的HTML5蝴蝶3D动画,它是基于HTML5和SVG实现的。这次我们要再一次为大家介绍另外一款同样也很酷的HTML5
Canvas蝴蝶飞舞动画,蝴蝶是在Canvas上绘制而成,利用HTML5的动画特性实现蝴蝶的飞舞,大家可以学习一下。

澳门微尼斯人手机版 14

在线演示 
  源码下载

  规定船体沿x轴方向摆放,船体中心位于世界坐标系原点,船头朝向x轴负方向,船顶朝向y轴正方向。

 用colspan合并单元格

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>合并单元格</title>
 5     <meta charseg = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>用colspan合并左右单元格</h4>
 9     <table border = "1px">
10         <tr>
11             <td colspan = "2">A1 B2</td>
12             <td>C1</td>
13         </tr>
14         <tr>
15             <td>A2</td>
16             <td>B2</td>
17             <td>C2</td>
18         </tr>    
19         <tr>
20             <td>A3</td>
21             <td>B3</td>
22             <td>C3</td>
23         </tr>    
24         <tr>
25             <td>A4</td>
26             <td>B4</td>
27             <td>C4</td>
28         </tr>
29     </table>
30 </body>
31 </html>

 


澳门微尼斯人手机版 15


7、HTML5 Canvas 3D天体运行动画

今天我们要给大家分享一款基于HTML5 Canvas的3D星球天体运行动画,这里我们在Canvas画布上绘制了一颗较大的星球,然后在大星球周围有一圈很小的陨石区域,这些陨石会围绕着星球不停地旋转,而且配合黑色的背景后带有很强烈的3D视觉效果。

澳门微尼斯人手机版 16

在线演示 
  源码下载

  事实上,在编写3D模型时固定的长度数值并没有决定性的意义(当然过大或过小可能导致物体脱出视场),决定模型形状的关键是各处尺寸之间的比例关系,具体的尺寸大小都可以在载入模型后根据需要进行缩放,这里将船体长度设为30单位是为了在预设的编辑场景里方便查看。

用rowspan合并单元格

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>合并单元格-rowspan</title>
 5     <meta chaset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>用rowspan合并单元格</h4>
 9     <table border = "1px">
10         <tr>
11             <td rowspan = "2">A1</td>
12             <td>B1</td>
13             <td>C1</td>
14         </tr>
15         <tr>
16             <td>B2</td>
17             <td>C2</td>
18         </tr>
19         <tr>
20             <td>A3</td>
21             <td>B3</td>
22             <td>C3</td>
23         </tr>
24         <tr>
25             <td>A4</td>
26             <td>B4</td>
27             <td>C4</td>
28         </tr>        
29     </table>
30 </body>
31 </html>

 


 

澳门微尼斯人手机版 17


8、HTML5 Canvas 房间3D模型动画 可读取麦克风和摄像头

这是一款基于HTML5 Canvas的3D房间模拟动画,房间里有电视机、沙发、书柜、灯具以及一个人物模型,这些模型都是在Canvas上绘制而成。更重要的是,这款3D动画可以利用HTML5特性读取本地麦克风和摄像头,这样就可以通过摄像头将你自己投影到电视机上,看上去挺神奇的。

澳门微尼斯人手机版 18

在线演示 
  源码下载

  然后开始构建一个符合上述轮廓的条带网格。

 合并单元格-上下左右

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>合并单元格-上下左右</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>合并单元格-上下左右</h4>
 9     <table border = "1px">
10         <tr>
11             <td colspan = "2" rowspan = "2">A1 B1<br/>A2 B2</td>
12             <td>C1</td>
13         </tr>
14         <tr>
15             <td>C2</td>
16         </tr>
17         <tr>
18             <td>A3</td>
19             <td>B3</td>
20             <td>C3</td>
21         </tr>
22         <tr>
23             <td>A4</td>
24             <td>B4</td>
25             <td>C4</td>
26         </tr>        
27     </table>
28 </body>
29 </html>

 


澳门微尼斯人手机版 19


9、HTML5 Canvas 随机色彩光束爆炸动画特效

今天我们要给大家分享一款非常炫酷的HTML5 Canvas光束爆炸动画特效,它就像一朵光速爆炸开一样,动画效果非常绚丽。点击鼠标时,可以随机切换光速的颜色,当然你也可以在页面上放几个按钮,通过点击按钮来指定某一种颜色的光束。

澳门微尼斯人手机版 20

在线演示 
  源码下载

  2、开始编写条带网格的路径(顶点数组),首先生成一个半径是7的圆形路径,规定圆弧由128个顶点组成(事实上最终生成的路径有129个顶点):

排列单元格中的内容

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>排列单元格中的内容</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4 align = "center">使用align排列单元格内容</h4>
 9     <table border = "1px" width = "400px" align = "center">
10         <tr>
11             <th align = "center">项目</th>
12             <th align = "center">一月</th>
13             <th align = "center">二月</th>
14         </tr>
15         <tr>
16             <td align = "center">衣服</td>
17             <td align = "center">$343</td>
18             <td align = "center">$332</td>
19         </tr>
20         <tr>
21             <td align = "center">化妆品</td>
22             <td align = "center">$232</td>
23             <td align = "center">$333</td>
24         </tr>
25         <tr>
26             <td align = "center">食物</td>
27             <td align = "center">$672</td>
28             <td align = "center">$321</td>
29         </tr>
30         <tr>
31             <th align = "center">总计</th>
32             <th align = "center">$565</th>
33             <th align = "center">$777</th>
34         </tr>
35     </table>
36 </body>
37 </html>

 


澳门微尼斯人手机版 21


10、HTML5 Canvas粒子数字时钟动画

还记得我们之前分享的几款HTML5粒子动画特效吗?比如这款HTML5文本输入框粒子动画特效和HTML5
Canvas生成粒子效果的人物头像,效果都非常炫酷。今天我们要给大家介绍的也是一款基于HTML5
Canvas的粒子数字时钟动画,时钟会读取本地时间,并且每变化一次均会出现粒子动画效果,这款粒子数字时钟非常适合在你的个性化博客中使用。

澳门微尼斯人手机版 22

在线演示 
  源码下载

 1 function MakeRing(radius,sumpoint)//两个参数分别是圆形的半径和圆形由多少个顶点组成
 2     {
 3         var arr_point=[];//顶点数组
 4         var radp=Math.PI*2/sumpoint;//每一个顶点在圆弧上转过的角度
 5         for(var i=0.0;i<sumpoint;i++)
 6         {
 7             var x=0;
 8             var rad=radp*i;
 9         //算出顶点的y、z坐标
10             var y=radius*Math.sin(rad);
11             var z=radius*Math.cos(rad);
12             arr_point.push(new BABYLON.Vector3(x,y,z));
13         }
14         arr_point.push(arr_point[0].clone());//为了保持首尾相连,要再添加一次第一个顶点
15         return arr_point;
16     }

 用cellpadding设置单元格的行高和列宽

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>cellpadding设置列宽和行高</title>
 5     <meta charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <h4>调整前</h4>
 9     <table border = "1px">
10         <tr>
11             <td>100</td>
12             <td>200</td>
13         </tr>
14         <tr>
15             <td>300</td>
16             <td>400</td>
17         </tr>    
18     </table>
19     <h4>调整后</h4>
20     <table border = "1px" cellpadding = "10px">
21         <tr>
22             <td>100</td>
23             <td>200</td>
24         </tr>
25         <tr>
26             <td>300</td>
27             <td>400</td>
28         </tr>
29     </table>
30 </body>
31 </html>

 


澳门微尼斯人手机版 23


 

11、HTML5 Canvas 圆形进度条 显示数字百分比

记得以前为大家分享过很多样式各异的进度条插件,有基于jQuery的,也有基于HTML5和CSS3的。这次我们要介绍另外一款基于HTML5
Canvas的圆形进度条应用,在黑色的背景下,白色的进度条显得格外显眼,而且圆形中央会实时显示当前进度的数字百分比,非常实用。

澳门微尼斯人手机版 24

在线演示 
  源码下载

  计算y、z坐标的示意图如下:

完整表格标记

标题:<caption></caption>

表头:<thead></thead>

主体:<tbody></tbody>

脚注:<tfoot></tfoot>

⚠️:<caption>必须紧跟<table>

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>完整的表格标记</title>
 5     <mata charset = "utf-8"/>
 6 </head>
 7 <body>
 8     <table border = "1px">
 9         <caption>学生成绩单</caption>
10         <thead>
11             <tr>
12                 <th>姓名</th>
13                 <th>性别</th>
14                 <th>成绩</th>
15             </tr>
16         </thead>    
17         <tfoot>
18             <tr>
19                 <th>平均分</th>
20                 <th colspan = "2">540</th>
21             </tr>
22         </tfoot>
23         <tbody>
24             <tr>
25                 <td>张三</td>
26                 <td>男</td>
27                 <td>560</td>
28             </tr>
29             <tr>
30                 <td>李四</td>
31                 <td>男</td>
32                 <td>520</td>
33             </tr>
34         </tbody>
35     </table>
36 </body>
37 </html>

 


澳门微尼斯人手机版 25


12、HTTML5 Canvas心电图动画 可多参数控制

今天要给大家分享另外一个超炫酷的HTML5 Canvas动画,它是一个心电图动画效果,程序运行时就会模拟心电图在屏幕上打印当前心跳信息。同时动画中带有一些开关按钮来控制心电图中的各个参数,动画相当逼真。

澳门微尼斯人手机版 26

在线演示 
  源码下载

澳门微尼斯人手机版 27

 综合示例-制作计算机报价单

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>综合示例-计算机报价单</title>
 5     <meta charset = "utf-8"/>
 6     <style>
 7         table{border: 3px solid #f60;}
 8         caption{font-size: 36px;}
 9         th,td{border: 1px solid #f90;}
10     </style>
11 </head>
12 <body>
13     <table>
14         <caption>计算机报价单</caption>
15         <thead>
16             <tr>
17                 <th>型号</th>
18                 <th>类型</th>
19                 <th>价格</th>
20                 <th>图片</th>
21             </tr>
22         </thead>
23         <tbody>
24             <tr>
25                 <td>宏基</td>
26                 <td>笔记本</td>
27                 <td>¥2799</td>
28                 <td><img src = "笔记本.jpg" alt = "笔记本" width = "100px" height = "60px"></td>
29             </tr>
30             <tr>
31                 <td>戴尔</td>
32                 <td>笔记本</td>
33                 <td>¥3499</td>
34                 <td><img src = "笔记本1.jpg" alt = "笔记本1" width = "100px" height = "60px"></td>
35             </tr>
36             <tr>
37                 <td>联想</td>
38                 <td>笔记本</td>
39                 <td>¥4149</td>
40                 <td><img src = "笔记本2.jpg" alt = "笔记本2" width = "100px" height = "60px"></td>
41             </tr>
42             <tr>
43                 <td>戴尔家用</td>
44                 <td>台式</td>
45                 <td>¥3599</td>
46                 <td><img src = "台式1.jpg" alt =" 台式1" width = "100px" height = "60px"></td>
47             </tr>
48             <tr>
49                 <td>宏图奇眩</td>
50                 <td>台式</td>
51                 <td>¥3399</td>
52                 <td><img src = "台式2.jpg" alt = "台式2" width = "100px" height = "60px"></td>
53             </tr>
54             <tr>
55                 <td>联想</td>
56                 <td>笔记本</td>
57                 <td>¥4299</td>
58                 <td><img src = "笔记本3.jpg" alt = "笔记本3" width = "100px" height = "60px"></td>
59             </tr>
60         </tbody>
61     </table>
62 </body>
63 </html>

 


澳门微尼斯人手机版 28


 

13、HTML5 Canvas 梦幻树生长动画

今天我们要为大家分享一款基于HTML5 Canvas的动画特效,它是一颗逐渐生长的梦幻大树,生长过程中树枝将会产生随机的色彩,让整一棵大树显得非常具有梦幻的效果。本实例利用了HTML5
Canvas的动画技术,实现了渐变式动画的特效。

澳门微尼斯人手机版 29

在线演示 
  源码下载

  y和z的计算需要用到初中数学的三角函数知识。

澳门微尼斯人手机版,14、CSS3实现五彩3D旋转星球

之前我们有分享过很多纯CSS3和HTML5实现的球体动画,比如这款HTML5
3D球体斑点运动动画和HTML5
Canvas
地球旋转3D动画都非常不错。今天要给大家分享另外一款超炫酷的CSS3五彩3D旋转星球,旋转起来的视觉效果相当震撼。

澳门微尼斯人手机版 30

在线演示 
  源码下载

  接下来使用“var
arr1=TranceRing1(MakeRing(7,128));”将圆形路径变成我们设计的船体截面路径,TranceRing1方法代码如下:

15、HTML5 Canvas闪亮的3D蓝宝石动画

几天前,我们向大家分享过一款基于HTML5
Canvas的3D钻石动画,制作得十分逼真。今天我们要分享另外一个基于HTML5 Canvas的3D蓝宝石动画,我们可以通过鼠标的拖拽来实现蓝宝石的各个视角的观察,并且通过鼠标滚轮来缩放宝石的大小,同时蓝宝石的表面会不时地发出闪亮的光芒,不得不说,Canvas在网页绘制方面真的是无所不能。

澳门微尼斯人手机版 31

在线演示 
  源码下载

 1 //上下挤压,对于每个顶点都生效的变换尽量只执行一次
 2 function TranceRing1(arr)
 3 {
 4     var len=arr.length;
 5     for(var j=0;j<len;j++)
 6     {
 7         var obj=arr[j];
 8         if(obj.y<0)
 9         {
10             obj.y=obj.y/4;
11             if(obj.y<-1)
12             {
13                 obj.y=-1;
14             }
15         }
16         else if(obj.y>2)
17         {
18             obj.y=(obj.y-2)/2+2;
19         }
20     }
21     return arr;
22 }

16、HTML5 Canvas 蓝色3D钻石旋转动画

今天我们要在HTML5 Canvas画布上绘制一颗高贵典雅的蓝色3D钻石,我们在Canvas画布上通过绘制很多个不同大小的多边形组成了一颗钻石,然后通过CSS3的颜色渐变特性让钻石的表面产生白色发光的特效,同样再利用CSS3的动画属性让钻石不停地旋转,展现出3D的视觉效果,非常炫酷。

澳门微尼斯人手机版 32

在线演示 
  源码下载

以上就是16个富有创意的HTML5
Canvas动画特效集合,如果你对HTML5感兴趣,欢迎下载源码学习。

  这里的算法很简单,遍历路径中的每个顶点,然后根据上面的设计进行逻辑判断即可。

  3、将上面生成的一条路径克隆为多条路径,规定每两条路径之间的距离为0.25:

1 arr_path=[];//路径数组
2     var xstartl=-15;//设置船头(也就是第一个圆环路径)在x轴上的位置    
3     var arr1=TranceRing1(MakeRing(7,128));
4     for(var i=0;i<121;i++)
5     {
6         var arr_point=CloneArrPoint(arr1);//克隆一条路径
7         arr_path.push(MoveX(arr_point,i*0.25+xstartl));//将克隆出的路径沿x轴方向平移
8     }

  路径克隆的示意图如下:

澳门微尼斯人手机版 33

  克隆路径和x轴平移的方法如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注