TML5不是一個新的現象，但HTML5的使用在過去幾年中已經有了飛速的發展。當涉及到富媒體，運動圖形和網絡上的互動內容時，HTML5幾乎完全取代了Flash的使用。由于移動應用程序開發人員的性能，易于使用和開放標準的剪切原因，它也受到了很大的調整。

HTML5的前身HTML4有許多改進，其中之一是包含用于在網頁上即時渲染圖形的canvas元素。

讓我們看看HTML5動畫的基礎知識，然后再轉到用于創建動畫橫幅，廣告，豐富的互動內容，電子賀卡，信息圖表，幻燈片，動態圖形，游戲等各種工具。

HTML5動畫 - 基礎知識

HTML5動畫包含在<canvas> </ canvas>元素中。為了一個基本的了解，html文檔中的canvas可以被看作是一個繪圖板，您可以在其中繪制形狀，然后快速更改框架，使其看起來像一個動畫圖形。

基本動畫的步驟非常簡單，您可以通過在HTML5，CSS和JavaScript中手動編寫代碼來創建基本動畫。復雜的動畫可以通過使用HTML5動畫工具來實現，該工具提供拖放功能來創建HTML5形狀，還可以添加動畫和交互。

這些工具通常會生成人類可讀的代碼，如果需要，可以進行修改，當然，代碼可以包含在HTML文檔中，也可以在手機，PC，平板電腦和智能電視上運行。其中一些工具包括Bannersnack，Mugeda，GSAP，Animatron，Edge Animate，HTML5 Maker和Tumult Hype等名稱。

讓我們來看一下非常基本的動畫的解剖（只是為了得到它的懸念），我們將看看用于使用HTML5創建動畫的各種工具。

創建簡單的HTML5動畫

要創建動畫，您需要在文檔和機制中的形狀，圖像，音頻，視頻來控制和操作所有這些您想要的方式。

可以使用HTML5方法繪制形狀，而圖像，音頻，視頻等可以通過引用導入文檔。控件可以通過Canvas API，CSS3元素中的直接方法或使用自定義JavaScript函數進行。

我們來看看畫布的設置，這是一個簡單的四步過程 -

第一步是清除整個畫布，讓你得到一個空白的畫面。您可以使用clearRect（）方法來執行此操作。第二步是保存畫布狀態，這很重要，因為在進行了更改之后，你會想回到原始狀態。

第三步是很好的部分，您將在此繪制動畫形狀并為動畫創建框架。第四步是保存幀狀態，循環繼續 - 返回原始狀態，畫出下一幀并保存。

通過直接使用像rect（），fillRect（），fillStyle（）和drawImage（）等畫布方法繪制形狀，或通過創建和調用自定義JavaScript函數來繪制形狀。像我之前說過的，圖像，音頻和視頻可以通過使用許多其他方法包含在空間和時間中，以便您擁有創建動畫所需的一切。

對于動畫，我們需要調用畫布狀態（在繪制過程中保存）并在一段時間內渲染不同的幀，為此，有三個JavaScript函數，即window.setInterval（），window.setTimeout（）和窗口.requestAnimationFrame（）。還有其他的方法，但現在我們將會保持我們的馬。查看Mozilla開發人員，了解使用各種方法在畫布中繪制和動畫的基礎知識。

您還可以查看循環動畫和動畫太陽系，以查看HTML5動畫以及代碼，以便更好地了解基礎知識。

如果你想看一些最先進的HTML5互動動畫，那么看看游戲中的免費騎士和這個令人興奮的HTML5破壞視頻。

我們來看看用于創建HTML5動畫的一些工具 -

Bannersnack

當使用拖放工具集創建HTML5橫幅廣告時，Bannersnack是市場上最好的工具之一。我個人喜歡Bannersnack的易用性和直觀的用戶界面。Bannersnack在許多財富500強公司如Google，花旗銀行，希爾頓，葛蘭素史克和airbnb等用戶中頗受歡迎。

您可以使用文字，圖像，音頻，按鈕和剪貼畫等來創建出色的橫幅藝術，并將完成的文件導出為HTML5，Flash / SWF，MP4，PNG，JPEG，GIF和Flash / HTML5嵌入。

使用Bannersnack創建的廣告幾乎與所有主要廣告網絡（包括Facebook廣告和Google AdWords）兼容。購買之前，您可以免費試用Bannersnack。

閱讀更多關于Bannersnack的信息，請點擊：Banner Snack：HTML5 Animation。

HTML5制造商 - 免費訂閱

HTML5 Maker是另一種流行的在線動畫工具，擁有超過100K的用戶，由名為OnlyMega LLC的公司。它最常用于創建html5動畫，滑塊，演示文稿和幻燈片等。雖然HTML5制造商提供商業訂閱，但它有一個免費的計劃，可用于創建動畫和橫幅等免費。

HTML5 Maker附帶了大量可以使用的模板。人們可以選擇最適合要求的模板，修改圖像，徽標，文本等，并將工作保存在云端。可以將動畫嵌入網站，博客或直接從云端分享到社交媒體網絡上。

使用HTML5創建的動畫在Mac，PC，iPad，iPhone，Android和許多其他平臺上的工作同樣輝煌。我喜歡HTML5 Maker的事實是，它不依賴于任何第三方庫和工具，甚至不依賴于Photoshop的圖形。您可以使用編輯器（包括圖像）創建您需要的所有內容。您可以根據需要導入您自己的媒體文件。

了解更多關于HTML5的設備在這里- HTML5制作

Mugeda

Mugeda平臺是由Mugeda Inc.創立和銷售的在線HTML5創作工具，該公司是一家位于舊金山的公司，在中國設有研發辦事處。

Mugeda平臺提供完整的解決方案來構建HTML5豐富的媒體，適用于所有屏幕，包括PC，平板電腦，智能手機和智能電視。它包括Mugeda工作室拖放編輯，工具，創建移動優化的MRAID 2.0投訴富媒體廣告，內置流量分析和JavaScript API為開發人員。

Mugeda大量用于創建HTML5媒體廣告，包括橫幅廣告，可展開廣告，迷你游戲和插頁式廣告。教師還可以為學生創建交互式內容。Mugeda被Red Bull，Mazda，Sunning，Buick，ANA等公司所使用。

GSAP

GSAP是一個商業產品的企業，從GreenSock的房子和在世界動畫的名義。GreenSock在過去14年處于市場，客戶包括微軟，Adobe，三星，可口可樂，福特等眾多客戶。

隨著基于HTML5的運動圖形的興起，他們推出了用于HTML5的GSAP，這是一個非常強大的工具，并具有創造驚人動畫的功能。GSAP的核心工具很少包括TweenLite，TweenMax，TimeLineLite和TimeLineMax。

Animatron

Animatron是HTML5動畫和解說器視頻的大爸爸，讓觀眾受益。您可以通過查看其客戶群，包括Google，Facebook，Amazon，Disney，Oracle，Fox，NASA和戴爾等巨頭，來衡量Animatron的受歡迎程度。

在Animatron看到Animatron

Tumult炒作

Tumult Hype用于制作互動和專業的動畫，適用于網絡，臺式機，筆記本電腦，智能手機和IPad，不需要任何編碼技巧。

Tumult Hype在基于關鍵幀的系統上工作，您可以在其中單擊記錄，Tumult開始在編輯器中創建移動框架; 可以手動添加和刪除幀，從頭開始，最后還是在中間。

Tumult大量用于創建交互式電子賀卡，信息圖形，電子書/ ibook，演示文稿等，所有這些都使用HTML5動畫與CSS屬性和JavaScript在后臺的魔力。

Google Web Designer

如果你像我一樣喜歡直接從Google家的產品，那么這個就是你的html5動畫工具。Google網頁設計師在撰寫本文時仍然處于測試階段，但根據我最近幾周的經驗，它的工作絕對正常。

Google網頁設計師被許多用于創建簡單的廣告，包括眼睛流暢的靜態和運動圖形。您可以免費下載Google網頁設計器，并在Windows，Mac或Linux上安裝。

CreateJS

CreateJS是一個不同的動物，并提供用于創建基于HTML5的豐富互動內容的圖書館和工具的集合。它提供的圖書館包括 -

?EASELJS - 控制和管理HTML5畫布元素

?TWEEENJS - 使用HTML5和JavaScript對Tween進行動畫處理

?SOUNDJS - 讓網絡聽到他們想要的內容

?PRELOADJS - 控制如何加載各種同意

CreateJs庫大量用于創建基于HTML5的廣告。Adobe動畫和CreateJS作為一個殺手組合，被廣告業界的設計師廣泛使用。

隨著Mozilla，Microsoft和Adobe等的支持，CreateJs似乎非常有希望，我們希望在將來的版本中看到更多的功能。

Hippani

Hippani是一家英國公司，Hippani動畫師可以在30天免費試用評估文章，您可以自行購買專業計劃。Hippani在人氣方面并沒有落后于Animatron，BannerSnack，HTML5制造商或Mugeda的聯盟，而是近期不斷升級的有前途的工具。

除了大多數其他工具的基本功能，Hippani還提供了一個用于創建復雜交互和游戲的javaScript引擎。

邊緣動畫CC

來自Adobe的房子，Edge Animate CC也一直被廣泛用于創建HTML5，但是自從過去幾年來，它還沒有得到升級，該產品盡管很受歡迎，可能會在另一個時間被停用。

用于制作HTML5運動圖形的另外三個好的工具包括RadiApp，Nodefire和Blysk。所有這些都是免費創建交互式運動圖形的工具，可以隨時嘗試。

創建圖形和動畫的另一個很好的選擇是SVG。由元素<svg>表示，它用作SVG（可伸縮矢量圖形）的容器。SVG有許多方法來繪制圓形文字，圖形圖像，線條等。

Canvas可用于創建更復雜的動畫，交互式圖形和在瀏覽器中運行的游戲。如果您有興趣了解SVG與Canvas的微妙差異。

HTML5動畫 - 簡史

1991年，Tim Berners-Lee發明了第一個被稱為版本1的HTML。相對原始但可能有幫助的語言，HTML的第一個版本在連續8年得到改進。多年來，1995年版本2，1997年第3版，1999年第4版。作為一種創新和創新的語言，2005年以來，HTML4中的一些限制很快就會變得明確。需要一個新的改進，HTML5的來臨在2012年實現。

有趣的是，HTML5支持移動網絡設備，它已經得到了很多人的歡迎，現在大多數瀏覽器都支持這種功能。即將推出的HTML5，史蒂夫的工作拒絕在蘋果設備中使用Flash，包括iPhone，iPad，iPod，并表示它不適合移動設備的性能和許多其他原因，而HTML5并未構建HTML4未被構建來創建更多的互動網站被視為已經過時和不充分。

當時的開發人員現在一致認為，需要開源標準來構建現代網站，從而導致HTML5的出現。當然，蘋果拒絕并不是唯一的理由，而是堅定的一個。

HTML5是不必要的，而且在許多方面都是大大改進了第四版，并在該語言中加入了音樂和音頻標簽。有一些其他的改進，以及我們稍后會談。

如果你覺得以上內容對您有用，請關注“Web堆兒”，我們的宗旨就是提供網站建設和運營中的各種干貨。

原文地址：http://www.gonet.com.cn/webduirshow-116.html

TML5 是第五個且是當前的 HTML 版本，它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。 -- Palak Shah

本文導航

• -新標簽和元素 …… 08%

• -HTML5 的高級功能 …… 16%

• -地理位置 …… 16%

• -網絡存儲 …… 33%

• -應用緩存（AppCache） …… 44%

• -視頻 …… 50%

• -音頻 …… 61%

• -畫布（Canvas） …… 71%

• -HTML5 工具 …… 78%

編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/

作者： Palak Shah

譯者： geekpi

HTML5 是第五個且是當前的 HTML 版本，它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。

HTML5 通過 W3C 和Web 超文本應用技術工作組Web Hypertext Application Technology Working Group之間的合作發展起來。它是一個更高版本的 HTML，它的許多新元素可以使你的頁面更加語義化和動態。它是為所有人提供更好的 Web 體驗而開發的。HTML5 提供了很多的功能，使 Web 更加動態和交互。

HTML5 的新功能是：

• 新標簽，如 <header> 和 <section>

• 用于 2D 繪圖的 <canvas> 元素

• 本地存儲

• 新的表單控件，如日歷、日期和時間

• 新媒體功能

• 地理位置

HTML5 還不是正式標準（LCTT 譯注：HTML5 已于 2014 年成為“推薦標準”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發 HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。

新標簽和元素

• 語義化元素： 圖 1 展示了一些有用的語義化元素。

• 表單元素： HTML5 中的表單元素如圖 2 所示。

• 圖形元素： HTML5 中的圖形元素如圖 3 所示。

• 媒體元素： HTML5 中的新媒體元素如圖 4 所示。

圖 1：語義化元素

圖 2：表單元素

圖 3：圖形元素

圖 4：媒體元素

HTML5 的高級功能

地理位置

這是一個 HTML5 API，用于獲取網站用戶的地理位置，用戶必須首先允許網站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是：

• 公共交通網站

• 出租車及其他運輸網站

• 電子商務網站計算運費

• 旅行社網站

• 房地產網站

• 在附近播放的電影的電影院網站

• 在線游戲

• 網站首頁提供本地標題和天氣

• 工作職位可以自動計算通勤時間

工作原理： 地理位置通過掃描位置信息的常見源進行工作，其中包括以下：

• 全球定位系統（GPS）是最準確的

• 網絡信號 - IP地址、RFID、Wi-Fi 和藍牙 MAC地址

• GSM/CDMA 蜂窩 ID

• 用戶輸入

該 API 提供了非常方便的函數來檢測瀏覽器中的地理位置支持：

if (navigator.geolocation) {

// do stuff

}

getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設備的當前地理位置。該位置被描述為一組地理坐標以及航向和速度。位置信息作為位置對象返回。

語法是：

getCurrentPosition(showLocation, ErrorHandler, options);

• showLocation：定義了檢索位置信息的回調方法。

• ErrorHandler（可選）：定義了在處理異步調用時發生錯誤時調用的回調方法。

• options （可選）： 定義了一組用于檢索位置信息的選項。

我們可以通過兩種方式向用戶提供位置信息：測地和民用。

1. 描述位置的測地方式直接指向緯度和經度。

2. 位置信息的民用表示法是人類可讀的且容易理解。

如下表 1 所示，每個屬性/參數都具有測地和民用表示。

圖 5 包含了一個位置對象返回的屬性集。

圖5：位置對象屬性

網絡存儲

在 HTML 中，為了在本機存儲用戶數據，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經引入了 Web 存儲，網站利用它在本機上存儲用戶數據。

與 Cookie 相比，Web 存儲的優點是：

• 更安全

• 更快

• 存儲更多的數據

• 存儲的數據不會隨每個服務器請求一起發送。只有在被要求時才包括在內。這是 HTML5 Web 存儲超過 Cookie 的一大優勢。

有兩種類型的 Web 存儲對象：

1. 本地 - 存儲沒有到期日期的數據。

2. 會話 - 僅存儲一個會話的數據。

如何工作： localStorage 和 sessionStorage 對象創建一個 key=value 對。比如： key="Name"， value="Palak"。

這些存儲為字符串，但如果需要，可以使用 JavaScript 函數（如 parseInt() 和 parseFloat()）進行轉換。

下面給出了使用 Web 存儲對象的語法：

• 存儲一個值：

• localStorage.setItem("key1", "value1");

• localStorage["key1"] = "value1";

• 得到一個值：

• alert(localStorage.getItem("key1"));

• alert(localStorage["key1"]);

• 刪除一個值： -removeItem("key1");

• 刪除所有值：

• localStorage.clear();

應用緩存（AppCache）

使用 HTML5 AppCache，我們可以使 Web 應用程序在沒有 Internet 連接的情況下脫機工作。除 IE 之外，所有瀏覽器都可以使用 AppCache（截止至此時）。

應用緩存的優點是：

• 網頁瀏覽可以脫機

• 頁面加載速度更快

• 服務器負載更小

cache manifest 是一個簡單的文本文件，其中列出了瀏覽器應緩存的資源以進行脫機訪問。 manifest 屬性可以包含在文檔的 HTML 標簽中，如下所示：

<html manifest="test.appcache">

...

</html>

它應該在你要緩存的所有頁面上。

緩存的應用程序頁面將一直保留，除非：

1. 用戶清除它們

2. manifest 被修改

3. 緩存更新

視頻

在 HTML5 發布之前，沒有統一的標準來顯示網頁上的視頻。大多數視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規定了使用 video 元素在網頁上顯示視頻的標準方式。

目前，video 元素支持三種視頻格式，如表 2 所示。

下面的例子展示了 video 元素的使用：

<! DOCTYPE HTML>

<html>

<body>

<video src=" vdeo.ogg" width="320" height="240" controls="controls">

This browser does not support the video element.

</video>

</body>

</html>

例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使視頻在 Safari 和未來版本的 Chrome 中工作，我們必須添加一個 MPEG4 和 WebM 文件。

video 元素允許多個 source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個識別的格式，如下所示：

<video width="320" height="240" controls="controls">

<source src="vdeo.ogg" type="video/ogg" />

<source src=" vdeo.mp4" type="video/mp4" />

<source src=" vdeo.webm" type="video/webm" />

This browser does not support the video element.

</video>

圖6：Canvas 的輸出

音頻

對于音頻，情況類似于視頻。在 HTML5 發布之前，在網頁上播放音頻沒有統一的標準。大多數音頻也通過 Flash 等不同的插件播放。但 HTML5 規定了通過使用音頻元素在網頁上播放音頻的標準方式。音頻元素用于播放聲音文件和音頻流。

目前，HTML5 audio 元素支持三種音頻格式，如表 3 所示。

audio 元素的使用如下所示：

<! DOCTYPE HTML>

<html>

<body>

<audio src=" song.ogg" controls="controls">

This browser does not support the audio element.

</video>

</body>

</html>

此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未來版本中使 audio 工作，我們必須添加一個 MP3 和 Wav 文件。

audio 元素允許多個 source 元素，它可以鏈接到不同的音頻文件。瀏覽器將使用第一個識別的格式，如下所示：

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

This browser does not support the audio element.

</audio>

畫布（Canvas）

要在網頁上創建圖形，HTML5 使用 畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網絡下載圖像而提高網站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面，如下所示：

<canvas id="myCanvas" width="200" height="100"></canvas>

畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現繪制。所有繪畫應在 JavaScript 中。

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="blue";

cxt.storkeStyle = "red";

cxt.fillRect(10,10,100,100);

cxt.storkeRect(10,10,100,100);

</script>

以上腳本的輸出如圖 6 所示。

你可以繪制許多對象，如弧、圓、線/垂直梯度等。

HTML5 工具

為了有效操作，所有熟練的或業余的 Web 開發人員/設計人員都應該使用 HTML5 工具，當需要設置工作流/網站或執行重復任務時，這些工具非常有幫助。它們提高了網頁設計的可用性。

以下是一些幫助創建很棒的網站的必要工具。

• HTML5 Maker： 用來在 HTML、JavaScript 和 CSS 的幫助下與網站內容交互。非常容易使用。它還允許我們開發幻燈片、滑塊、HTML5 動畫等。

• Liveweave： 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結果。它非常易于使用，并為一些代碼提供自動完成功能，這使得開發和測試更快更容易。

• Font dragr： 在瀏覽器中預覽定制的 Web 字體。它會直接載入該字體，以便你可以知道看起來是否正確。也提供了拖放界面，允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。

• HTML5 Please： 可以讓我們找到與 HTML5 相關的任何內容。如果你想知道如何使用任何一個功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設備的有用資源的列表，語法，以及如何使用元素的一般建議等。

• Modernizr： 這是一個開源工具，用于給訪問者瀏覽器提供最佳體驗。使用此工具，你可以檢測訪問者的瀏覽器是否支持 HTML5 功能，并加載相應的腳本。

• Adobe Edge Animate： 這是必須處理交互式 HTML 動畫的 HTML5 開發人員的有用工具。它用于數字出版、網絡和廣告領域。此工具允許用戶創建無瑕疵的動畫，可以跨多個設備運行。

• Video.js： 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網站，你應該使用此工具。它使視頻看起來不錯，并且是網站的一部分。

• The W3 Validator： W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網站標記的有效性。要測試任何網站的標記有效性，你必須選擇文檔類型為 HTML5 并輸入你網頁的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯誤和警告。

• HTML5 Reset： 此工具允許開發人員在 HTML5 中重寫舊網站的代碼。你可以使用這些工具為你網站的訪問者提供一個良好的網絡體驗。

Palak Shah

作者是高級軟件工程師。她喜歡探索新技術，學習創新概念。她也喜歡哲學。你可以通過 palak311@gmail.com[1] 聯系她。

via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者：Palak Shah[2] 譯者：geekpi 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

點擊“了解更多”可訪問文內鏈接

web開發中，GIF動畫效果是隨處可見，比如常見的loading加載、人物奔跑的gif圖片等等，那么這些都是怎么實現的呢？

其實實現的原理很簡單，簡而言之，這些所謂的動畫都是一幀一幀的圖片經過一段時間的間隔做出位移而來的；譬如，我們在PS里面制作GIF動畫，首先要把每一幀所需要的圖片制作出來，然后再通過導出的方式把GIF圖片保存下來；相信會PS的同學，都可以熟練的制作一個基本的GIF動畫圖片；在web開發中，要實現這樣的gif圖片，也有很多方法；在這給讀者提供一個思路，就是利用html5 canvas實現動畫效果。

利用canvas的drawImage把含有幀的圖片加載到canvas中去，再結合js實現動畫

<!DOCTYPE html>
<html lang="en"><head>
 <meta charset="UTF-8">
 <title>canvas幀--實現動畫</title>
 <style>
 *{padding:0;margin:0;}
 canvas{display:block;background:white}
</style>
</head>
<body> 
<canvas></canvas>
<script>
 var imgPic = new Image();
 imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png';
 var canvas = document.querySelector('canvas');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 var ctx = canvas.getContext('2d');
 imgPic.onload = function () {
 drawImg()
 }
 var i = 0;
 var lastTime = new Date().getTime();
 var delatime;
 var timer = 0;
 function drawImg() {
 window.requestAnimationFrame(drawImg);
 var now = new Date().getTime();
 delatime = now - lastTime;
 lastTime = now;
 timer += delatime;
 if (timer > 200) {
 i++;
 if (i > 7) i = 0;
 timer = 0
 }
 console.log(delatime)
 ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);
 }
</script>
</body>
</html>

以上方法實現的前提是，需要有一張已繪制幀的圖片，有了圖片才可進行幀的動畫；利用該方法可以控制動畫的播放、暫停以及幀率