暂没有新消息哦～
课程加载中...
服务热线:400-678-8266你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
发表了文章 o 0 个评论 o 60 次浏览 o
o 来自相关话题
给大家分享一套华清远见的Android开发视频，总共7大技术视频，包括JAVAEE、Android、UI设计等，
这个是限时领取，四月底结束吧，有需要的抓紧了。
ｗｗｗ.embedu.org/sky01/index-bbs.html
给大家分享一套华清远见的Android开发视频，总共7大技术视频，包括JAVAEE、Android、UI设计等，
这个是限时领取，四月底结束吧，有需要的抓紧了。
ｗｗｗ.embedu.org/sky01/index-bbs.html
发表了文章 o 0 个评论 o 66 次浏览 o
o 来自相关话题
给大家分享一套华清远见的WEB前端开发、HTML5开发视频，总共7大技术视频，包括JAVAEE、Android、UI设计等，
这个是限时领取，四月底结束吧，有需要的抓紧了。
ｗｗｗ.embedu.org/sky01/index-bbs.html
给大家分享一套华清远见的WEB前端开发、HTML5开发视频，总共7大技术视频，包括JAVAEE、Android、UI设计等，
这个是限时领取，四月底结束吧，有需要的抓紧了。
ｗｗｗ.embedu.org/sky01/index-bbs.html
发表了文章 o 0 个评论 o 185 次浏览 o
o 来自相关话题
本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。
本次文章继续介绍bootstrap当中的网格系统。
上一章我们介绍到网格系统可以用来做响应式的功能，
我们可以使用一套代码来做不同屏幕的适配。
除了这样还有其他的使用方法。
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
&div class=&container&&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-2 col-md-offset-4&&
向右移动四列的间距
&div class=&col-md-2&&.col-md-2&/div&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4 col-md-offset-4&&
向右移动四列的间距
&h4&发生行断裂&/h4&
&div class=&container&&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-2 col-md-offset-4&&
向右移动四列的间距&/div&
&div class=&col-md-2&&.col-md-2&/div&
&div class=&row&&
&div class=&col-md-3&&.col-md-3&/div&
&div class=&col-md-3 col-md-offset-3&&
向右移动三列的间距
&div class=&col-md-4&&.col-md-4&/div&
&/div&并且这个偏移也是响应式的
本文为机构官方的教程 。
本次文章继续介绍bootstrap当中的网格系统。
上一章我们介绍到网格系统可以用来做响应式的功能，
我们可以使用一套代码来做不同屏幕的适配。
除了这样还有其他的使用方法。
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
&div class=&container&&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-2 col-md-offset-4&&
向右移动四列的间距
&div class=&col-md-2&&.col-md-2&/div&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4 col-md-offset-4&&
向右移动四列的间距
&h4&发生行断裂&/h4&
&div class=&container&&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-2 col-md-offset-4&&
向右移动四列的间距&/div&
&div class=&col-md-2&&.col-md-2&/div&
&div class=&row&&
&div class=&col-md-3&&.col-md-3&/div&
&div class=&col-md-3 col-md-offset-3&&
向右移动三列的间距
&div class=&col-md-4&&.col-md-4&/div&
&/div&并且这个偏移也是响应式的
发表了文章 o 0 个评论 o 63 次浏览 o
o 来自相关话题
本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。
本次内容介绍网格的工作原理。
在bootstrap当中将网格分为4种
lg（大）、md（中）、sm（小）、xs（超小）
4中屏幕大小，我们设置的时候也就是设置这个元素在不同屏幕大小下显示的宽度
4中屏幕分别对应的宽度是
lg&=1200px md&=996px sm&=768px xs&768px
当屏幕大小符合条件时就会触发，每一个格子占页面的宽度的1/12.
而且这当中的类名不光有col-lg-N
还有行的类名，row
在boostrap当中col最好放到row当中，而row必须放到容器.container当中，否则项目会在底部出现水平滚动条。
而.container给元素的左右两边加入合适的距离，来避免此现象的发生。&div class=&container&&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-8&&.col-md-8&/div&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&row&&
&div class=&col-md-3&&.col-md-3&/div&
&div class=&col-md-6&&.col-md-6&/div&
&div class=&col-md-3&&.col-md-3&/div&
本文为机构官方的教程 。
本次内容介绍网格的工作原理。
在bootstrap当中将网格分为4种
lg（大）、md（中）、sm（小）、xs（超小）
4中屏幕大小，我们设置的时候也就是设置这个元素在不同屏幕大小下显示的宽度
4中屏幕分别对应的宽度是
lg&=1200px md&=996px sm&=768px xs&768px
当屏幕大小符合条件时就会触发，每一个格子占页面的宽度的1/12.
而且这当中的类名不光有col-lg-N
还有行的类名，row
在boostrap当中col最好放到row当中，而row必须放到容器.container当中，否则项目会在底部出现水平滚动条。
而.container给元素的左右两边加入合适的距离，来避免此现象的发生。&div class=&container&&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-8&&.col-md-8&/div&
&div class=&row&&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&col-md-4&&.col-md-4&/div&
&div class=&row&&
&div class=&col-md-3&&.col-md-3&/div&
&div class=&col-md-6&&.col-md-6&/div&
&div class=&col-md-3&&.col-md-3&/div&
发表了文章 o 0 个评论 o 55 次浏览 o
o 来自相关话题
本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的栅格系统就是将容器平分成12份。
先看一下如何应用
&div class=&row&&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&row&&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&row&&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&/div&加入类名就可以使用，也就是使用一套代码适配多个屏幕。
下一章开始详解栅格系统的工作原理
本文为机构官方的教程 。栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的栅格系统就是将容器平分成12份。
先看一下如何应用
&div class=&row&&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&row&&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&row&&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&div class=&col-md-1&&.col-md-1&/div&
&/div&加入类名就可以使用，也就是使用一套代码适配多个屏幕。
下一章开始详解栅格系统的工作原理
发表了文章 o 0 个评论 o 67 次浏览 o
o 来自相关话题
本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。
在网页中可以看到许多小图标。bootstrap中有近200个不同的小图标。他们都是字体图标
&span class=&glyphicon glyphicon-search&&&/span&
&span class=&glyphicon glyphicon-asterisk&&&/span&
&span class=&glyphicon glyphicon-plus&&&/span&
&span class=&glyphicon glyphicon-cloud&&&/span&除了上面写出来的，在文档当中还有许多的小图标。
使用时要注意将字体文件放在项目目录当中，并且注意路径。
要更改字体图标的样式，要通过文字属性来进行修改。
本文为机构官方的教程 。
在网页中可以看到许多小图标。bootstrap中有近200个不同的小图标。他们都是字体图标
&span class=&glyphicon glyphicon-search&&&/span&
&span class=&glyphicon glyphicon-asterisk&&&/span&
&span class=&glyphicon glyphicon-plus&&&/span&
&span class=&glyphicon glyphicon-cloud&&&/span&除了上面写出来的，在文档当中还有许多的小图标。
使用时要注意将字体文件放在项目目录当中，并且注意路径。
要更改字体图标的样式，要通过文字属性来进行修改。
发表了文章 o 0 个评论 o 57 次浏览 o
o 来自相关话题
本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。
图像在网页制作中也是常要用到的元素，在Bootstrap框架中有对图像的样式风格的类。
&div class=&container&&
&div class=&row&&
&div class=&col-sm-4&&
&img alt=&140*140& src=&tu.png&&
&div&默认图片&/div&
&div class=&col-sm-4&&
&img class=&img-rounded& alt=&140*140&
src=&tu.png&&
&div&圆角图片&/div&
&div class=&col-sm-4&&
&img class=&img-circle& alt=&140*140&
src=&tu.png&&
&div&圆形图片&/div&
&div class=&row&&
&div class=&col-sm-6&&
&img class=&img-thumbnail& alt=&140*140&
src=&tu.png&&
&div&缩略图&/div&
&div class=&col-sm-6&&
&img class=&img-responsive& alt=&140*140&
src=&tu.png&&
&div&响应式图片&/div&
&/div&我们可见通过代码看到每一种图片的所需要的类名。
img-rounded 圆角图片
img-circle 圆形图片
img-thumbnail 缩略图
img-responsive 响应式图片
本文为机构官方的教程 。
图像在网页制作中也是常要用到的元素，在Bootstrap框架中有对图像的样式风格的类。
&div class=&container&&
&div class=&row&&
&div class=&col-sm-4&&
&img alt=&140*140& src=&tu.png&&
&div&默认图片&/div&
&div class=&col-sm-4&&
&img class=&img-rounded& alt=&140*140&
src=&tu.png&&
&div&圆角图片&/div&
&div class=&col-sm-4&&
&img class=&img-circle& alt=&140*140&
src=&tu.png&&
&div&圆形图片&/div&
&div class=&row&&
&div class=&col-sm-6&&
&img class=&img-thumbnail& alt=&140*140&
src=&tu.png&&
&div&缩略图&/div&
&div class=&col-sm-6&&
&img class=&img-responsive& alt=&140*140&
src=&tu.png&&
&div&响应式图片&/div&
&/div&我们可见通过代码看到每一种图片的所需要的类名。
img-rounded 圆角图片
img-circle 圆形图片
img-thumbnail 缩略图
img-responsive 响应式图片
发表了文章 o 0 个评论 o 48 次浏览 o
o 来自相关话题
本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。按钮也有禁用状态，和活动状态
&button class=&btn btn-lg btn-primary btn-block disabled&&通过添加类名disabled禁用按钮&/button&
&button class=&btn btn-primary btn-block& disabled=&disabled&&通过disabled属性禁用按钮&/button&
&button class=&btn btn-primary btn-block btn-xs&&未禁用的超小型按钮&/button&通过添加类名disabled或者添加disabled属性来禁用按钮，同时按钮除了大、小还有超小型按钮。
可以赋值代码运行查看效果
本文为机构官方的教程 。按钮也有禁用状态，和活动状态
&button class=&btn btn-lg btn-primary btn-block disabled&&通过添加类名disabled禁用按钮&/button&
&button class=&btn btn-primary btn-block& disabled=&disabled&&通过disabled属性禁用按钮&/button&
&button class=&btn btn-primary btn-block btn-xs&&未禁用的超小型按钮&/button&通过添加类名disabled或者添加disabled属性来禁用按钮，同时按钮除了大、小还有超小型按钮。
可以赋值代码运行查看效果
发表了文章 o 0 个评论 o 56 次浏览 o
o 来自相关话题
本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。
在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
&button class=&btn btn-primary btn-lg&&大型按钮&/button&
&button class=&btn btn-primary&&正常按钮&/button&
&button class=&btn btn-primary btn-sm&&小型按钮&/button&可以运行一下代码，查看效果
本文为机构官方的教程 。
在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
&button class=&btn btn-primary btn-lg&&大型按钮&/button&
&button class=&btn btn-primary&&正常按钮&/button&
&button class=&btn btn-primary btn-sm&&小型按钮&/button&可以运行一下代码，查看效果
发表了文章 o 0 个评论 o 59 次浏览 o
o 来自相关话题
本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。可以用其他标签实现按钮效果，不过不推荐使用，了解就可以 &button class=&btn btn-default& type=&button&&button按钮&/button&
&input type=&button& class=&btn btn-default& value=&input按钮&&
&span class=&btn btn-default&&span标签按钮&/span&
&div class=&btn btn-default&&div标签按钮&/div&使用bootstrao的包装样式即可使用其他标签实现按钮样式
本文为机构官方的教程 。可以用其他标签实现按钮效果，不过不推荐使用，了解就可以 &button class=&btn btn-default& type=&button&&button按钮&/button&
&input type=&button& class=&btn btn-default& value=&input按钮&&
&span class=&btn btn-default&&span标签按钮&/span&
&div class=&btn btn-default&&div标签按钮&/div&使用bootstrao的包装样式即可使用其他标签实现按钮样式
0 个问题, 0 次赞同
0 个问题, 0 次赞同
0 个问题, 0 次赞同
0 个问题, 0 次赞同
0 个问题, 0 次赞同我们依据最新的W3技术规范，采编相关技术博客和在线作品，结合商业项目实践经验来撰写这么一部使用HTML5技术编写的HTML5在线教程。
为了便于理解和记忆词汇的定义，我们采用中英文对照的方式。同时我们依托踏得网HTML5在线开发工具，采用用例驱动的方式来切实提高学习效率和实战能力。
我们采用迭代方式来开发这个教程，目前已完成基础部分（下面打勾的模块）。
参考链接：，，。
任何问题请邮件到：形状不一定始终沿着直线运动。如果你需要的动画效果是沿着圆周运动，例如，沿着圆形轨道运行（如图1所示）该如何实现呢？这是完全可以实现的，并且不需要使用太多代码，这里需要使用三角函数的相关知识，可能需要你稍微动一下脑筋。
使形状动画沿着圆形轨道运动
概念非常简单：将一个形状放在圆周的边缘处（它的周长上），以圆周的任意位置作为起点。但为了简单起见，可以将形状放在周长上角度为0弧度的位置，该位置位于右手边（如图1所示）。在每次动画循环中，只需要增加位于圆周上的形状的角度，就可以使形状沿着圆周运动。这非常简单，接下来我们具体讨论如何实现。
1．三角函数
需要解决的问题是：如何计算位于圆周上的形状的（x，y）坐标值（如图2所示）。这听上去也许很深奥，但需要解决的问题其实很简单。当然，只有用正确的方式来考虑需要解决的问题，才会觉得它容易。
确定圆周上某个位置对应的坐标值
在解决问题之前，首先需要知道圆的实际大小。可以选择任意大小的圆周，毕竟，这里只是示例，所以实际大小并不重要。重要的是可以通过半径（从圆心到圆周的长度）来描述圆的大小。如果画出运动轨道所在圆周的半径，那么你会发现形状移动的角度遵循一种有趣的模式（如图3所示）。
画出半径，突出了一种有趣的模式
如果你认真地看或者稍微思考一下，也许就会发现这种模式。如果幸运的话，你会发现三角形的边存在一些规律。如果没有发现规律，也不要紧。如果你是第一次接触这种问题，那么稍微发挥一下想象力就可以了。图4中有这里要讨论的三角形。
半径是圆周内直角三角形的一条边
圆周中包含了一个三角形。但它有何用处呢？这个三角形能够提供一些准确的信息，帮助你计算形状沿圆周移动到新位置处的（x，y）坐标值。更具体地说，现在得到了一个三角形和两个角度（沿圆周转动的角度和三角形的90度直角），接下来可以构造一些基本三角形来计算你需要的值。这也体现了数学的重要作用。但是，在真正解决问题之前，我还要简要解释一下三角函数的原理。
三角函数的基本要点是：如果已知一个三角形的一个角是90度，并且已知另外一个角，那么就可以计算三角形的边长之间的比值。然后，可以通过该比值来计算边的长度，边的长度单位是任意的，本示例中边的单位是像素。因此，你需要知道三角形的哪条边是需要计算的长度，因为它们分别对应着不同的三角函数规则。这三条边分别是斜边（最长的边）、邻边（与除直角以外的已知角相邻的边）和对边（与已知角相对的边）。图5详细标注了这些边。
描述直角三角形的三条边
要计算边之间的比值，需要用3种三角函数：正弦函数（sin）、余弦函数（cos）或正切函数（tan）。正弦函数是对边与斜边的比值，余孩函数是邻边与斜边的比值，正切函数是对边与邻边的比值（如图6所示）。你也许听过把这些函数叫做SOH-CAH-TOA，其实这就是代表正弦-对边-斜边、余弦-邻边-斜边、正切-对边-邻边。通过把三角形中的已知角代入正确的函数，可以计算出所需的比值来。
SIN-COS-TAN公式
在此，我们需要知道三角形的邻边和对边的长度，它们分别代表x和y的位置（如图7所示）。要计算这些边的长度，首先需要在对应的三角函数中通过已知角计算比值。在JavaScript中，可以使用Math对象来计算这些比值：
var angle = 45;
var adjRatio = Math.cos(angle*(Math.PI/180)); // CAH
var oppRatio = Math.sin(angle*(Math.PI/180)); // SOH
通过三角函数计算三角形对应边的比值
你会注意到，Math对象的cos和sin方法中执行了一些简单的计算过程。这种计算是为了将角从角度转换为弧度，因为JavaScript使用的单位是弧度。如果你在开始就使用弧度制，就不需要做任何转换了。
得到这些比值仅仅完成了一半的工作量。另外一半工作才是最终我们需要得到的答案，将这些比值与斜边（因为它是半径，所以长度已知）的长度相比较，如图8所示。最终的答案可以由半径乘以该比值得到，即：
var radius = 50;
var x = radius * adjR
var y = radius * oppR
通过每条边的比值计算坐标值
2．综合运用
既然你能够计算位于圆周上某个角度的形状对应的（x，y）坐标值，那么把这些结果综合应用于当前的示例就非常简单了。第一步是更新Shape类，并向其中添加几个新属性：
var Shape = function(x, y, width, height) {
this.width =
this.height =
this.radius = Math.random()*30;
this.angle = 0;
这两个属性用于设置起始角度和计算圆周的随机半径（介于0～30之间）。倒数第二步是使用以下代码替换动画循环中的现有代码，从而更新形状：
var x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
var y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
tmpShape.angle += 5;
if (tmpShape.angle > 360) {
tmpShape.angle = 0;
前两行代码没有什么新内容，它们分别用于计算位于圆周上当前角度的形状所对应的x和y值，其中圆周是通过半径来定义的。
这里的x和y值能够提供坐标值（假设圆周中心的坐标为（0，0）），因此，当将x和y值添加到形状中对应的点（x，y）时，就可以把形状移动到正确的位置。
注意，形状对象中定义的点（x，y）现在引用的是圆周的中心——形状围绕它旋转的点，而不是形状的起点。
最后几行代码用于在每个动画循环中增加角的度数，如果角度超过360度（一个完整的圆），则将角度重新设置为0度。
最后，将新的x和y变量添加到fillRect方法中：
context.fillRect(x, y, tmpShape.width, tmpShape.height);
如果一切运行正常，点击Start启动动画，就可以出现各个形状沿着不同的圆周轨迹运动（如图9所示）。
我们可以在此例基础上进一步实现经典的太阳系（公转/自传）模型（留作课程练习，可自行在搜索相关作品以作参考）。
多个圆形轨道运动动画
本节需要一些基础的几何知识，可能有些难度，以下是完整的代码供你参考。
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
var playAnimation =
var startButton = $("#startAnimation");
var stopButton = $("#stopAnimation");
startButton.hide();
startButton.click(function() {
$(this).hide();
stopButton.show();
playAnimation =
animate();
stopButton.click(function() {
$(this).hide();
startButton.show();
playAnimation =
var Shape = function(x, y, width, height) {
this.width =
this.height =
this.radius = Math.random()*30;
this.angle = 0;
var shapes = new Array();
for (var i = 0; i < 10; i++) {
var x = Math.random()*250;
var y = Math.random()*250;
var width = height = Math.random()*30;
shapes.push(new Shape(x, y, width, height));
function animate() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
var shapesLength = shapes.
for (var i = 0; i
tmpShape.angle = 0;
context.fillRect(x, y, tmpShape.width, tmpShape.height);
if (playAnimation) {
setTimeout(animate, 33);
animate();
你可以自己试试：