HTML5實現簡單圓周運動示例

一、使用js實現圓周運動

根據指定圓心、半徑，在定時器中移動固定的弧度，重繪圓圈的位置

源**：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
.circle
.rectangle
style
>
head
>
<
body
>
<
div 
class
="rectangle"
>
<
div 
class
="circle"
>
div>
div>
<
script 
src="../js/jquery-1.11.3.min.js"
>
script
>
<
script
>
(function
());
//呼叫自己
requestanimationframe(reset);
}//啟動定時器
requestanimationframe(reset);
})();
script
>
body
>
html
>

二、使用css實現圓周運動使用transform的rotate方法實現旋轉，需要重點設定一下圓心位置

源**：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
@keyframes runto}
.circle
.rectangle
style
>
head
>
<
body
>
<
div 
class
="rectangle"
>
<
div 
class
="circle"
>
div>
div>
body
>
html
>

更多：html5 標籤download 屬性

html5 拖放---（二）轉

瀏覽器記住密碼、瀏覽器記住密碼表單自動載入

html5繪製小球波形運動

var canvas document.getelementbyid ballbroad var context canvas.getcontext 2d 角度var angle 0 y步長var speedy 0.1 x步長var speedx 3 重新整理頻率 var frames 1000 6...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...