HTML5中的Canvas動畫研究

摘 要： 結合HTML5的特點及新特性詳細介紹了canvas的功能及應用，分析了HTML5 canvas與flash的區別。通過利用canvas制作圓環動畫的案例，講解了canvas動畫制作，并提出了canvas動畫應用的發展方向。

關鍵詞： HTML5； flash； canvas； 動畫制作； 發展方向

中圖分類號：TP312 文獻標志碼：A 文章編號：1006-8228（2016）08-47-03

Abstract： Based on the characteristics and new features of HTML5， this paper introduces the functions and applications of canvas， and analyzes the difference between HTML5 canvas and flash. Through the case of making ring animation， canvas animation making is explained， and the development direction of the application of canvas animation is put forward.

Key words： HTML5； flash； canvas； animation making； development direction

0 引言

Canvas元素是HTML5中新增的一個重要元素，專門用來繪制圖形。在頁面中添加一個canvas元素，相當于在頁面上放置一塊畫布，通過該元素再帶的API結合JavaScript代碼可以在畫布上繪制圖形及動畫效果，并提供交互。

1 HTML5概述

隨著互聯網移動信息技術的不斷發展，以及SaaS（Software as a Service）、云計算（Cloud Computing）和 RIA （Rich Internet Applications）等新技術的不斷涌現，Web 應用越來越要求瀏覽器具有數據庫存儲功能和更強的頁面表現能力，這種需求推動了HTML5 標準的產生和應用[1]。HTML5是互聯網的下一代標準，將逐步取代HTML4.01和XHTML1.0標準，是Web開發的最基礎的技術，也被認為是互聯網的核心技術之一[2]。HTML4.01誕生于1999年，作為W3C推薦的標準，其在隨后的十年中從沒有過大范圍的變化，但互聯網技術不斷變化，Web應用更是日新月異，相比較起來，HTML的升級和改造則變得相對落后，逐漸成為Web應用發展的瓶頸。HTML5草案與2004年提出，2007年被W3C采納。HTML5被開發者看做創建流行Web應用的利器，提供了很多API，HTML5能夠創建更簡單的Web程序，編寫更簡潔的HTML代碼，從而讓HETML緊跟互聯網時代的發展。HTML5增加了對視頻和canvas 2D的支持，HTML5的誕生還讓人們重新審視瀏覽器專用多媒體的未來，如Adobe公司的flash和微軟公司的silverlight，HTML5為實現這些插件的功能提供了一種標準化的方式，通過新增一些新的元素和API，讓瀏覽器原生的支持相關的標記語言，把用MathML和SVG編寫的標記直接嵌入到HTML5網頁中，從而比既要支持圖形又要兼顧文本的flash和silverlight更有競爭力，減少了對瀏覽器插件的需要，進而降低了安全風險。

總體而言，HTML5是基于最大程度上兼容HTML4而設計的，并圍繞Web標準這個目標，產生了許多新的特性和技術，HTML5具有以下新特性。

⑴ 對于DOCTYPE的聲明、命名空間聲明、字符集編碼聲明更簡短。例如：命名空間聲明更簡短，HTML5可以直接寫成。

⑵ 鏈接css和JavaScript文件代碼更簡潔。在HTML4中，要鏈接css和JavaScript文件時，需要指定type屬性，如：。

⑶