HTML5中的Canvas動畫研究

摘 要： 結(jié)合HTML5的特點(diǎn)及新特性詳細(xì)介紹了canvas的功能及應(yīng)用，分析了HTML5 canvas與flash的區(qū)別。通過利用canvas制作圓環(huán)動畫的案例，講解了canvas動畫制作，并提出了canvas動畫應(yīng)用的發(fā)展方向。

關(guān)鍵詞： HTML5； flash； canvas； 動畫制作； 發(fā)展方向

中圖分類號：TP312 文獻(xiàn)標(biāo)志碼：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中新增的一個(gè)重要元素，專門用來繪制圖形。在頁面中添加一個(gè)canvas元素，相當(dāng)于在頁面上放置一塊畫布，通過該元素再帶的API結(jié)合JavaScript代碼可以在畫布上繪制圖形及動畫效果，并提供交互。

1 HTML5概述

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

總體而言，HTML5是基于最大程度上兼容HTML4而設(shè)計(jì)的，并圍繞Web標(biāo)準(zhǔn)這個(gè)目標(biāo)，產(chǎn)生了許多新的特性和技術(shù)，HTML5具有以下新特性。

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

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

⑶