HTML5中的Canvas動(dòng)畫(huà)研究

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

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

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

1 HTML5概述

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

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

⑴ 對(duì)于DOCTYPE的聲明、命名空間聲明、字符集編碼聲明更簡(jiǎn)短。例如：命名空間聲明更簡(jiǎn)短，HTML5可以直接寫(xiě)成。

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

⑶