作為一名潮流的程序員，你需要知道HTML5的三大優(yōu)勢(shì)

TML5是互聯(lián)網(wǎng)技術(shù)開發(fā)歷史上的重要里程碑，雖然HTML5剛剛完成標(biāo)準(zhǔn)定制，但是HTML5的普及速度越來越快，覆蓋面也是越來越廣，所以HTML5技術(shù)開發(fā)的招聘崗位在網(wǎng)上也是越來越多。很多公司對(duì)HTML5的開發(fā)也是特別重視，所以這幾年來很多的開發(fā)者都開始轉(zhuǎn)向HTML5，尤其是在這一年移動(dòng)端占拒了三分之二的市場(chǎng)，HTML5也因此引領(lǐng)IT潮流。

今天猿小哥（微信：猿碼技術(shù)或猿碼iCoder）給大家聊聊學(xué)習(xí)HTML5的好處：

一、技術(shù)優(yōu)勢(shì)

HTML5這門編程語(yǔ)言本身的連貫表現(xiàn)和功能也是逐漸更新，而且伴隨著瀏覽器的改進(jìn)，就例如以前的IE瀏覽器，目前的運(yùn)行和速度已經(jīng)跟不上行業(yè)的發(fā)展了，以谷歌、百度、360瀏覽器為代表的后起之秀，為我們提供一種更快、更高效的瀏覽體驗(yàn)。隨著 Flash 的式微，HTML5 憑借豐富的多媒體兼容性贏得了眾多開發(fā)者的青睞，只需要借助瀏覽器的基礎(chǔ)功能，用戶就能運(yùn)行網(wǎng)絡(luò)應(yīng)用，從此不再需要下載和安裝特定插件。

二、商業(yè)需求

互聯(lián)網(wǎng)流量的轉(zhuǎn)變也是形成了一種新轉(zhuǎn)變，從起初我們用的臺(tái)式電腦到現(xiàn)在的手機(jī)，手機(jī)端流量穩(wěn)占第一，而HTML5的誕生正好迎合了這樣一個(gè)趨勢(shì)，從生活中就可以得出結(jié)論，手機(jī)已經(jīng)離不開人們的視線范圍了，人脈生活也離不開手機(jī)了。而HTML5程序開發(fā)在手機(jī)端更是占了優(yōu)勢(shì)，所以很多公司在手機(jī)APP開發(fā)與移動(dòng)端有關(guān)的軟件正是大力開發(fā)。HTML5“一次開發(fā)，多處兼容”的特性，使得企業(yè)能以最小的開發(fā)成本，設(shè)計(jì)、創(chuàng)造和管理更加先進(jìn)也更加復(fù)雜的應(yīng)用，并且橫跨多種平臺(tái)和設(shè)備。

三、技術(shù)人才的需求

對(duì)于一般的人來說HTML5的出現(xiàn)也就是一種新的技術(shù)出現(xiàn)了，然而對(duì)于互聯(lián)網(wǎng)技術(shù)人才來說，HTML5的出現(xiàn)是一個(gè)轉(zhuǎn)折點(diǎn)，HTML5給技術(shù)人才們帶來的好處那是相當(dāng)?shù)拇?，HTML5的優(yōu)勢(shì)在于其開放的標(biāo)準(zhǔn)支持，這有助于他們?yōu)樗槠囊苿?dòng)設(shè)備、不同的屏幕尺寸、差異化的平臺(tái)和操作系統(tǒng)開發(fā)應(yīng)用。開發(fā)者們可以使用HTML5創(chuàng)建和呈現(xiàn)不依賴于操作系統(tǒng)或設(shè)備的富內(nèi)容，這是原生應(yīng)用的替代。所以說HTML5的出現(xiàn)對(duì)技術(shù)員們也是幫助很大的。

4G時(shí)代的開啟將為移動(dòng)互聯(lián)網(wǎng)的發(fā)展注入巨大的發(fā)展動(dòng)力，猿碼技術(shù)借此契機(jī)，為想學(xué)習(xí)HTML5技術(shù)的人提供堅(jiān)實(shí)的技術(shù)支持。

eb 技術(shù)發(fā)展時(shí)間線

1991 HTML
1994 HTML2
1996 CSS1 + JavaScript
1997 HTML4
1998 CSS2
2000 XHTML1（嚴(yán)格的html）
2002 Tableless Web Design（表格布局）
2005 AJAX
2009 HTML5
2014 HTML5 Finalized

2002年的表格布局逐漸被淘汰，是因?yàn)椋罕砀袷怯脕沓休d數(shù)據(jù)的，并不是用來劃分網(wǎng)頁(yè)結(jié)構(gòu)的。

2009年就已經(jīng)推出了HTML5的草案，但直到2014年才有定稿，是因?yàn)橛幸苿?dòng)端的推動(dòng)。

H5草案的前身是叫：Web Application，最早是由WHATWG這個(gè)組織在2004年提出的。

2007年被 W3C 組織接納，并在 2008-01-22 發(fā)布 HTML5 的第一個(gè)草案。

什么是 HTML5

HTML5并不僅僅只是作為HTML標(biāo)記語(yǔ)言的一個(gè)最新版本，更重要的是它制定了Web應(yīng)用開發(fā)的一系列標(biāo)準(zhǔn)，成為第一個(gè)將Web做為應(yīng)用開發(fā)平臺(tái)的HTML語(yǔ)言。

HTML5定義了一系列新元素，如新語(yǔ)義標(biāo)簽、智能表單、多媒體標(biāo)簽等，可以幫助開發(fā)者創(chuàng)建富互聯(lián)網(wǎng)應(yīng)用，還提供了一些Javascript API，如地理定位、重力感應(yīng)、硬件訪問等，可以在瀏覽器內(nèi)實(shí)現(xiàn)類原生應(yīng)用。我們甚至可以結(jié)合 Canvas 開發(fā)網(wǎng)頁(yè)版游戲。

HTML5

的廣義概念：HTML5代表瀏覽器端技術(shù)的一個(gè)發(fā)展階段。在這個(gè)階段，瀏覽器的呈現(xiàn)技術(shù)得到了飛躍發(fā)展和廣泛支持，它包括：HTML5、CSS3、Javascript API在內(nèi)的一套技術(shù)組合。

HTML5不等于HTML next version。

HTML5包含：HTML的升級(jí)版、CSS的升級(jí)版、JavaScript API的升級(jí)版。

總結(jié)：HTML5是新一代開發(fā) Web 富客戶端應(yīng)用程序整體解決方案。包括：HTML5，CSS3，Javascript API在內(nèi)的一套技術(shù)組合。

富客戶端：具有很強(qiáng)的交互性和體驗(yàn)的客戶端程序。比如說，瀏覽博客，是比較簡(jiǎn)單的客戶端；一個(gè)在線聽歌的網(wǎng)站、即時(shí)聊天網(wǎng)站就是富客戶端。

PS：單純地從技術(shù)的角度講，兼容性問題只會(huì)讓開發(fā)者徒增煩惱。如果網(wǎng)頁(yè)端的程序能做到PC客戶端的體驗(yàn)，就會(huì)對(duì)后者構(gòu)成威脅。

HTML5 的應(yīng)用場(chǎng)景

列舉幾個(gè)HTML5 的應(yīng)用場(chǎng)景：

（1）極具表現(xiàn)力的網(wǎng)頁(yè)：內(nèi)容簡(jiǎn)約而不簡(jiǎn)單。

（2）網(wǎng)頁(yè)應(yīng)用程序：

代替PC端的軟件：iCloud、百度腦圖、Office 365等。
APP端的網(wǎng)頁(yè)：淘寶、京東、美團(tuán)等。
微信端：公眾號(hào)、小程序等。

（3）混合式本地應(yīng)用。

（4）簡(jiǎn)單的游戲。

記得在過去的Web前端開發(fā)中，如果你需要繪圖或者生成相關(guān)圖形的話，使用Flash可能是你唯一或者說最強(qiáng)大的實(shí)現(xiàn)方式，而在近些年的技術(shù)熱點(diǎn)HTML5標(biāo)準(zhǔn)中，HTML Canvas（畫布）能夠更加方便的幫助你實(shí)現(xiàn)2D繪制圖形圖像及其各種動(dòng)畫效果功能。

首先我們先來了解一下什么是HTML Canvas？

我們可以在HTML中使用屬性width和height來定義Canvas。但是實(shí)現(xiàn)Canvas的相關(guān)功能主要還依賴于Javascript實(shí)現(xiàn)，即HTML5 Canvas API。我們使用javascript來訪問和控制Canvas相關(guān)的區(qū)域，比如調(diào)用相關(guān)繪圖的方法，用來動(dòng)態(tài)的生成需要的動(dòng)畫或者圖形。

接下來我們來看看canvas的特性：

互動(dòng)性：Canvas支持互動(dòng)，可以很好的響應(yīng)用戶的操作，我們可以通過Javascript來監(jiān)鍵盤，鼠標(biāo)，及其觸摸設(shè)備相關(guān)事件。

動(dòng) 畫：任何被canvas繪制的圖形都可以添加動(dòng)畫，簡(jiǎn)單的彈跳球或者復(fù)雜的HTML5游戲都可以實(shí)現(xiàn)

靈活性：開發(fā)人員可以使用Canvas來繪制任何的內(nèi)容，比如，直線，圖形，文字，圖片等，可以包含動(dòng)畫或者不包含。同時(shí)你可以添加音頻或者視頻瀏覽器支持：幾乎所有的現(xiàn)代瀏覽器都支持，并且被廣泛的各種設(shè)備支持，例如，桌面，平板，智能手機(jī)等等。

流行度：canvas目前很流行，很多的開發(fā)人員都使用它來開發(fā)類似游戲或者繪圖類應(yīng)用

web標(biāo)準(zhǔn)：只需要有瀏覽器就可以運(yùn)行，而非flash或者silverlight，需要安裝相關(guān)的插件

開發(fā)一次，任何瀏覽器都可以運(yùn)行（當(dāng)然，不包括老式瀏覽器）

可以使用免費(fèi)擁有大量的開發(fā)工具及其類庫(kù)。

使用HTML5 Canvas我們能開發(fā)那些相關(guān)產(chǎn)品或者應(yīng)用呢？

1 可視化數(shù)據(jù)：各類統(tǒng)計(jì)圖表，比如:百度的echart

2 場(chǎng)景秀：用Canvas實(shí)現(xiàn)動(dòng)態(tài)的廣告效果能夠非常融洽的跨平臺(tái)運(yùn)行。如:手機(jī)中微產(chǎn)品.在移動(dòng)端兼容性很好。

3 游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas成為HTML5小游戲開發(fā)首選?，F(xiàn)階段h5做游戲,營(yíng)業(yè)方式不是很明確. 25 超棒的 HTML5 Canvas 游戲。

4 其他可嵌入網(wǎng)站的內(nèi)容 (多用于活動(dòng)頁(yè)面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。

5 趨勢(shì)=> 模擬器：無論從視覺效果還是核心功能方面來說，模擬器產(chǎn)品可以完全由JavaScript來實(shí)現(xiàn)。模擬真實(shí)硬件環(huán)境,如移動(dòng)端各種類型手機(jī).

6 趨勢(shì)=> 遠(yuǎn)程計(jì)算機(jī)控制： Canvas可以讓開發(fā)者更好地實(shí)現(xiàn)基于Web的數(shù)據(jù)傳輸，構(gòu)建一個(gè)完美的可視化控制界面。

7 趨勢(shì)=> 圖形編輯器： Photoshop圖形編輯器將能夠100%基于Web實(shí)現(xiàn)。

如何使用HTML5 Canvas？

使用HTML5 canvas其實(shí)非常簡(jiǎn)單，每一個(gè)canvas都擁有一個(gè)上下文（context）。使用它你可以來調(diào)用相關(guān)的畫布方法。

<p>您的瀏覽器不支持HTML5 Canvas</p>

</canvas>

以上代碼我們?cè)贖TML中添加了一個(gè)canvas標(biāo)簽，如果瀏覽器不支持canvas，會(huì)顯示<p>標(biāo)簽的內(nèi)容，當(dāng)然，如果你需要支持老式瀏覽器你也可以使用flash或者其它方法來做一個(gè)替代的解決方案。

var canvas = document.getElementById('mycanvas'),

context = canvas.getContext(‘2d’);

以上代碼我們通過canvas取到2D的context。

在HTML5 Canvas的2D結(jié)構(gòu)中，坐標(biāo)（0,0）在左上方，這和傳統(tǒng)的坐標(biāo)不太一樣。大家需要注意一下，如下圖所示：

下面來說一下canvas的API：

canvas的主要屬性和方法：

save():保存當(dāng)前環(huán)境的狀態(tài)

restore():返回之前保存過的路徑狀態(tài)和屬性

createEvent()

getContext():返回一個(gè)對(duì)象，指出訪問繪圖功能必要的API

toDateURL():返回canvas圖像的URL

顏色、樣式和陰影屬性和方法：

fillStyle:設(shè)置或返回用于填充繪畫的顏色、漸變或模式

strokeStyle:設(shè)置或返回用于筆觸的顏色、漸變或模式

shadowColor:設(shè)置或返回用于陰影的顏色

shadowBlur:設(shè)置或返回用于陰影的模糊級(jí)別

shadowOffsetX:設(shè)置或返回陰影距形狀的水平距離

shadowOffsetY:設(shè)置或返回陰影距形狀的垂直距離

createLinearGradient():創(chuàng)建線性漸變（用在畫布內(nèi)容上）

createPattern():在指定的方向上重復(fù)指定的元素

createRadialGradient():創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內(nèi)容上）

addColorStop():規(guī)定漸變對(duì)象中的顏色和停止位置

線條樣式屬性和方法

lineCap:設(shè)置或返回線條的結(jié)束端點(diǎn)樣式

lineJoin:設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的拐角類型

lineWidth:設(shè)置或返回當(dāng)前的線段寬度

miterLimit:設(shè)置或返回最大斜接長(zhǎng)度

Canvas的API-路徑方法

fill():填充當(dāng)前繪圖(路徑)

stroke():繪制已定義的路徑

beginPath():起始一條路徑，或重置當(dāng)前路徑

moveTo():把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條

closePath():創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑

lineTo():添加一個(gè)新點(diǎn)，創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條

clip():從原始畫布剪切任意形狀和尺寸的區(qū)域

quadraticCurveTo():創(chuàng)建二次貝塞爾曲線

bezierCurveTo():創(chuàng)建三次貝塞爾曲線

arc():創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）

arcTo():創(chuàng)建兩切線之間的弧/曲線

isPointInPath():如果指定的點(diǎn)位于當(dāng)前路徑中，返回布爾值

Canvas的API-轉(zhuǎn)換方法

scale():縮放當(dāng)前繪圖至更大或更小

rotate():旋轉(zhuǎn)當(dāng)前繪圖

translate():重新映射畫布上的（0，0）位置

transform():替換繪圖的當(dāng)前轉(zhuǎn)換矩陣

setTransform():將當(dāng)前轉(zhuǎn)換重置為單位矩陣，然后運(yùn)行transform（）

Canvas的API-文本屬性和方法

font:設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性

textAlign:設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式

textBaseline:設(shè)置或返回在繪制文本時(shí)使用的的當(dāng)前文本基線

fillText():在畫布上繪制“被填充的”文本

strokeText():在畫布上繪制文本（無填充）

measureText():返回包含指定文本寬度的對(duì)象

Canvas的API-圖像繪制方法

drawImage():向畫布上繪制圖像、畫布或視頻

Canvas的API-像素操作方法和屬性

width:返回ImageData對(duì)象的寬度

height:返回ImageData對(duì)象的高度

data:返回一個(gè)對(duì)象，其包含指定的ImageData對(duì)象的圖像數(shù)據(jù)

createImageData():創(chuàng)建新的、空白的I馬哥Data對(duì)象

getImageData():返回ImageData對(duì)象，該對(duì)象為畫布上指定的矩形復(fù)制像素?cái)?shù)據(jù)

putImageData():把圖像數(shù)據(jù)（從指定的ImageData對(duì)象）放回畫布上

Canvas的API-圖像合成屬性

globalAlpha:設(shè)置或返回繪圖的當(dāng)前alpha或透明值

globalCompositeOperation:設(shè)置或返回新圖像如何繪制到已有的圖像上

快速高效的創(chuàng)建HTML5畫布圖形？

直接使用Canvas來繪制圖形相對(duì)來說比較乏味并且麻煩，所以在現(xiàn)代的HTML5 Canvas中我們使用一些現(xiàn)成的第三方類庫(kù)幫助我們多快好省的實(shí)現(xiàn)圖形繪制的功能：

KineticJS

Paper.js

EaselJS

Fabric.js

oCanvas

Echart.js

在線咨詢

上一篇：html JavaScript md5解密代碼分享，附接口親測(cè)可用
下一篇：Sublime Text常用快捷鍵和插件

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。