整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
007年，蘋果公司發(fā)布iPhone、OS系統(tǒng)，不支持Flash。此后的iPhone、iPod、iPad均不支持Flash。
2009年，Adobe推出Packager for iPone，用于把Flash游戲包裝成iPhone應(yīng)用。
然而蘋果公司好像并不領(lǐng)情。
2010年4月，喬布斯發(fā)表公開信“Thoughts on Flash（Flash之我見）”，文內(nèi)說明了喬布斯眼里Flash的落后之處，以及Flash給MAC造成的死機(jī)等問題，并表示Adobe應(yīng)該注重開發(fā)更多HTML5工具。
2011年，Adobe放棄了Flash移動(dòng)端的研發(fā)工作，這意味著Flash不再支持移動(dòng)設(shè)備。
2012年，W3C小組宣布已經(jīng)完成對(duì)HTML5標(biāo)準(zhǔn)以及Canvas 2D性能制定標(biāo)準(zhǔn)。
2014年10月，W3C（萬(wàn)維網(wǎng)聯(lián)盟）宣布HTML5標(biāo)準(zhǔn)規(guī)范最終制定完成，歷時(shí)八年，HTML5終于塵埃落定。
W3C CEO Jeff Jaffe博士表示：“HTML5將推動(dòng)Web進(jìn)入新的時(shí)代。不久以前，Web還只是上網(wǎng)看一些基礎(chǔ)文檔，而如今，Web是一個(gè)極大豐富的平臺(tái)。我們已經(jīng)進(jìn)入一個(gè)穩(wěn)定階段，每個(gè)人都可以按照標(biāo)準(zhǔn)行事，并且可用于所有瀏覽器。如果我們不能攜起手來(lái)，就不會(huì)有統(tǒng)一的Web?！?/p>
2015年1月，YouTuBe宣布棄用所有Adobe Flash視頻播放器，將HTML5作為其在Chrome、IE、 Safari 8等主流瀏覽器的默認(rèn)播放方式。
2015年2月，Google開始將旗下廣告從Flash版本轉(zhuǎn)移到HTML5。
2015年7月，F(xiàn)irefox瀏覽器封殺舊版Flash播放器。
2015年9月1日開始，Amazon公司旗下包括Amazon.com在內(nèi)的所有廣告不再使用Flash。
2015年12月22日，F(xiàn)acebook宣布不再使用Flash，自家網(wǎng)站的所有視頻默認(rèn)使用HTML5播放。
2015年12月，Adobe在官網(wǎng)發(fā)文宣布合并Flash與HTML5制作軟件，更名Animate CC。并呼吁開發(fā)者放棄Flash，轉(zhuǎn)移到HTML5平臺(tái)上來(lái)。
2016年5月，Google Chrome宣布從9月開始屏蔽Flash內(nèi)容，到12月Chrome將會(huì)全面支持HTML5。
2016年8月，F(xiàn)irefox瀏覽器在新一次升級(jí)中，默認(rèn)禁止所有版本的Flash播放，用戶可以自行開啟。
一些公司也表明了下一步動(dòng)作：
2017年1月，Google廣告平臺(tái)將不再允許投放Flash。
2007到現(xiàn)在，10年光陰，我們無(wú)法否認(rèn)Flash曾經(jīng)多么輝煌，但就如同“沉舟側(cè)畔千帆過，病樹前頭萬(wàn)木春”，新事物產(chǎn)生，舊事物淘汰，F(xiàn)lash最終將會(huì)退出互聯(lián)網(wǎng)的舞臺(tái)。
在互聯(lián)網(wǎng)行業(yè)不斷發(fā)展變化的今天，HTML5將越來(lái)越大的發(fā)展空間也是可以肯定的。
就拿微信來(lái)說，2016年4月，微信客戶端升級(jí)至X5 Blink 內(nèi)核，更好的支持 HTML5/CSS3。近兩年，各種利用HTML5制作的網(wǎng)頁(yè)、小游戲逐漸進(jìn)入大眾的視野，通過這樣的形式也讓HTML5散發(fā)著青春與活力。
HTML5是否會(huì)完全取代原生APP，這個(gè)問題我們不得而知，但就目前來(lái)說把HTML5游戲做得更加好，使用戶獲得更好的體驗(yàn)，是我們?cè)诤蹩萍荚诤醯氖隆?/p>
TML5為了更好地處理今天的互聯(lián)網(wǎng)應(yīng)用，添加了很多新元素及功能，比如： 圖形的繪制，多媒體內(nèi)容，更好的頁(yè)面結(jié)構(gòu)，更好的形式處理，和幾個(gè)api拖放元素，定位，包括網(wǎng)頁(yè)應(yīng)用程序緩存，存儲(chǔ)，網(wǎng)絡(luò)工作者等。
HTML5的<canvas>標(biāo)簽可以定義圖形，比如圖表和其他圖像。該標(biāo)簽是基于 JavaScript 的繪圖 API。
如想完成這樣一個(gè)任務(wù)，畫一個(gè)包含時(shí)間軸的世界歷史年表，如下圖所示：
要完成上述任務(wù)，便可以使用HTML5+CSS+JS，代碼如下：
<!DOCTYPE html>
<html><title>historyTidePrev</title>
<style type="text/css">
.left{/*total 974,豎線起始位置：436px*/
width:350px;
float:left;
padding-left:56px;
padding-right:30px;
}
.right{/*豎線起始位置：436px*/
width:500px;
float:left;
padding-left:38px;
}
p{
line-height:16px;
margin:0;
padding:0;
text-indent:-2em;
}
</style>
<script>
function scrol...(){
var scl=document.body.scrollHeight/2+30*14;
window.scrollBy(0,scl);
}
</script>
<canvas id="myCanvas2" width="974" height="29418" style="border:0px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
var canvasW=974;
var dingJiange=18; //頂端間隔 豎線起始位置(Y軸）
var diJiange=0; //底部間隔 豎線起始位置(Y軸）
var jianGe=dingJiange+diJiange;
var Xcor=436; //豎線X坐標(biāo)的起始位置；
//因最小的字體需要12它，所以下面的定位需要達(dá)到12；
var nianPX=14; //一年間隔使用的像素；
var nianYprev=2100; //公元前有多少年開始
var nianYnex=0;//公元前后多少年結(jié)束
var nianYprevPx=nianYprev*nianPX; //公元前有多少年及像素；
var nianYnexPx=nianYnex*nianPX; //公元后有多少年及像素；
var Ycor=nianYprevPx+nianYnexPx; //豎線Y坐標(biāo)的終點(diǎn)位置（長(zhǎng)度）；
var nianL=8; //年線段的長(zhǎng)度；
var nianL10=20; //10年線段的長(zhǎng)度；
var nianL100=30; //100年線段的長(zhǎng)度；
var fontsi=nianPX*3;//字體大小
var fontsi10=nianPX*4;
var fontsi100=nianPX*5;
//長(zhǎng)豎線
ctx.beginPath();
ctx.moveTo(Xcor,dingJiange);
ctx.lineTo(Xcor,Ycor+diJiange);
ctx.stroke();
//年橫線
for(i=dingJiange;i<=Ycor+diJiange;i+=nianPX){
ctx.beginPath();
ctx.moveTo(Xcor,i);
ctx.lineTo(Xcor-nianL,i);
ctx.strokeStyle = "rgba(0, 0, 0, 0.4)";
ctx.stroke();
}
//5年橫線
for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*5){
ctx.beginPath();
ctx.moveTo(Xcor,i);
ctx.lineTo(Xcor-nianL*1.5,i);
ctx.strokeStyle = "rgba(0, 0, 0, 0.6)";
ctx.stroke();
}
//10年橫線和文本
for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*10){
ctx.beginPath();
ctx.moveTo(Xcor,i);
ctx.lineTo(Xcor-nianL*2,i);
ctx.strokeStyle = "rgba(0, 0, 0, 0.8)";
ctx.stroke();
ctx.textAlign="right";
var varmid=(i-dingJiange)/nianPX;
if(varmid%100!=0){
ctx.font="12px 宋體"; //30px 可以寫在里面
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText((i-dingJiange)/nianPX-nianYprev,Xcor-nianL*2,i+6);
}
}
//100年橫線和文本
for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*100){
ctx.beginPath();
ctx.moveTo(Xcor,i);
ctx.lineTo(Xcor-nianL*3,i);
ctx.strokeStyle = "rgba(0, 0, 0, 0.9)";
ctx.stroke();
ctx.textAlign="right";
ctx.font="18px 宋體"; //30px 可以寫在里面
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText((i-dingJiange)/nianPX-nianYprev,Xcor-nianL*3,i+8);
}
function txtL(year0,txt){
var xc=Xcor-nianL-65; //左邊的線條從右邊開始到左邊結(jié)束的位置；
var xc2=10;//左邊文本從左邊開始的位置；
var yp;
if(year0>=0){
yp=dingJiange+nianYprevPx+year0*nianPX;
txt="" + year0 + "年," + txt;
}else{
yp=dingJiange+nianYprevPx+year0*nianPX;
yearp=year0*(-1);
txt="前" + yearp + "年," + txt;
}
ctx.fillStyle="#00f";
ctx.beginPath();
ctx.moveTo(Xcor-60,yp);
ctx.lineTo(xc+xc2-25,yp);
ctx.stroke();
ctx.font="12px Verdana";
ctx.fillStyle="#000";
ctx.textAlign="left";
//xc的位置是xc=Xcor+nianL100＝974－436－30＝508，可以容納46個(gè)12px的字符(44*12=535)；
var txtN;//右邊屏幕可容納字符串個(gè)數(shù)；
var txtW=12*1;//手工算出是0.945;txtW是一個(gè)字符串的寬度；
txtN=Math.floor(xc/txtW);
if(txt.length>txtN){
var fortime=Math.ceil(txt.length/txtN);//需要循環(huán)的次數(shù)；
ctx.fillText(txt.substring(0,txtN),xc2,yp);
for(i=0;i<fortime;i++){
yp=yp+14;
txt=txt.substring(txtN);
var txt2=" "+txt.substring(0,txtN);
ctx.fillText(txt2,xc2,yp);
}
}else{
ctx.fillText(txt,xc2,yp);
}
}
function txtR(year0,txt){
var xc=Xcor+nianL100;
var yp;
if(year0>=0){
yp=dingJiange+nianYprevPx+year0*nianPX;
txt="" + year0 + "年，" + txt;
}else{
yp=dingJiange+nianYprevPx+year0*nianPX;
yearp=year0*(-1);
txt="前" + yearp + "年，" + txt;
}
ctx.fillStyle="#00f";
ctx.beginPath();
ctx.moveTo(Xcor+3,yp);
ctx.lineTo(xc,yp);
ctx.stroke();
ctx.font="12px Verdana";
ctx.fillStyle="#000";
ctx.textAlign="left";
//xc的位置是xc=Xcor+nianL100＝974－436－30＝508，可以容納46個(gè)12px的字符(44*12=535)；
var txtN;//右邊屏幕可容納字符串個(gè)數(shù)；
var txtW=12*1;//手工算出是0.945;txtW是一個(gè)字符串的寬度；
txtN=Math.floor((canvasW-xc)/txtW);
if(txt.length>txtN){
var fortime=Math.ceil(txt.length/txtN);//需要循環(huán)的次數(shù)；
ctx.fillText(txt.substring(0,txtN-4),xc,yp);
for(i=0;i<fortime;i++){
yp=yp+14;
txt=txt.substring(txtN-4);
var txt2=" "+txt.substring(0,txtN-4);
ctx.fillText(txt2,xc,yp);
}
}else{
ctx.fillText(txt,xc,yp);
}
}
txtR(-580,"畢達(dá)哥拉斯(約-580～-500年)古希臘數(shù)學(xué)家、哲學(xué)家創(chuàng)立畢達(dá)哥拉斯學(xué)派，提出畢達(dá)哥拉斯定理、數(shù)和諧說和靈魂輪回說。");txtR(-563,"釋迦牟尼約-563～前483年佛教創(chuàng)始人建立了完整的佛教教義學(xué)說。");
txtL(-551,"孔子-551.9.28--479.4.11，春秋時(shí)期魯國(guó)人.");
txtR(-552,"孫武齊國(guó)樂安人,漢族.公元前527年，年僅25歲的孫武完成曠世圣書——《孫子兵法》。");
txtR(-427,"公元前427～前348／347)年古希臘哲學(xué)家柏拉圖創(chuàng)立“學(xué)園派”，建立以“理念論”為核心的客觀唯心主義哲學(xué)體系。");
txtR(-384,"前4世紀(jì)，希臘亞里士多德(公元前384年-公元前322年)對(duì)數(shù)學(xué)、動(dòng)物學(xué)等進(jìn)行綜合研究。");
txtR(-0,"");
txtR(-0,"");
</script>
</body>
</html>
TML5 是第五個(gè)且是當(dāng)前的 HTML 版本，它是用于在萬(wàn)維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語(yǔ)言。本文將幫助讀者了解它。 -- Palak Shah
本文導(dǎo)航
-新標(biāo)簽和元素 …… 08%
-HTML5 的高級(jí)功能 …… 16%
-地理位置 …… 16%
-網(wǎng)絡(luò)存儲(chǔ) …… 33%
-應(yīng)用緩存（AppCache） …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布（Canvas） …… 71%
-HTML5 工具 …… 78%
編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/作者： Palak Shah
譯者： geekpi
HTML5 是第五個(gè)且是當(dāng)前的 HTML 版本，它是用于在萬(wàn)維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語(yǔ)言。本文將幫助讀者了解它。
HTML5 通過 W3C 和Web 超文本應(yīng)用技術(shù)工作組Web Hypertext Application Technology Working Group之間的合作發(fā)展起來(lái)。它是一個(gè)更高版本的 HTML，它的許多新元素可以使你的頁(yè)面更加語(yǔ)義化和動(dòng)態(tài)。它是為所有人提供更好的 Web 體驗(yàn)而開發(fā)的。HTML5 提供了很多的功能，使 Web 更加動(dòng)態(tài)和交互。
HTML5 的新功能是：
新標(biāo)簽，如 <header> 和 <section>
用于 2D 繪圖的 <canvas> 元素
本地存儲(chǔ)
新的表單控件，如日歷、日期和時(shí)間
新媒體功能
地理位置
HTML5 還不是正式標(biāo)準(zhǔn)（LCTT 譯注：HTML5 已于 2014 年成為“推薦標(biāo)準(zhǔn)”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發(fā) HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個(gè)插件。
語(yǔ)義化元素： 圖 1 展示了一些有用的語(yǔ)義化元素。
表單元素： HTML5 中的表單元素如圖 2 所示。
圖形元素： HTML5 中的圖形元素如圖 3 所示。
媒體元素： HTML5 中的新媒體元素如圖 4 所示。
圖 1：語(yǔ)義化元素
圖 2：表單元素
圖 3：圖形元素
圖 4：媒體元素
地理位置這是一個(gè) HTML5 API，用于獲取網(wǎng)站用戶的地理位置，用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過按鈕和/或?yàn)g覽器彈出窗口來(lái)實(shí)現(xiàn)。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。
地理位置的一些用途是：
公共交通網(wǎng)站
出租車及其他運(yùn)輸網(wǎng)站
電子商務(wù)網(wǎng)站計(jì)算運(yùn)費(fèi)
旅行社網(wǎng)站
房地產(chǎn)網(wǎng)站
在附近播放的電影的電影院網(wǎng)站
在線游戲
網(wǎng)站首頁(yè)提供本地標(biāo)題和天氣
工作職位可以自動(dòng)計(jì)算通勤時(shí)間
工作原理： 地理位置通過掃描位置信息的常見源進(jìn)行工作，其中包括以下：
全球定位系統(tǒng)（GPS）是最準(zhǔn)確的
網(wǎng)絡(luò)信號(hào) - IP地址、RFID、Wi-Fi 和藍(lán)牙 MAC地址
GSM/CDMA 蜂窩 ID
用戶輸入
該 API 提供了非常方便的函數(shù)來(lái)檢測(cè)瀏覽器中的地理位置支持：
if (navigator.geolocation) {// do stuff
}
getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設(shè)備的當(dāng)前地理位置。該位置被描述為一組地理坐標(biāo)以及航向和速度。位置信息作為位置對(duì)象返回。
語(yǔ)法是：
getCurrentPosition(showLocation, ErrorHandler, options);
showLocation：定義了檢索位置信息的回調(diào)方法。
ErrorHandler（可選）：定義了在處理異步調(diào)用時(shí)發(fā)生錯(cuò)誤時(shí)調(diào)用的回調(diào)方法。
options （可選）： 定義了一組用于檢索位置信息的選項(xiàng)。
我們可以通過兩種方式向用戶提供位置信息：測(cè)地和民用。
描述位置的測(cè)地方式直接指向緯度和經(jīng)度。
位置信息的民用表示法是人類可讀的且容易理解。
如下表 1 所示，每個(gè)屬性/參數(shù)都具有測(cè)地和民用表示。
圖 5 包含了一個(gè)位置對(duì)象返回的屬性集。
圖5：位置對(duì)象屬性
網(wǎng)絡(luò)存儲(chǔ)在 HTML 中，為了在本機(jī)存儲(chǔ)用戶數(shù)據(jù)，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經(jīng)引入了 Web 存儲(chǔ)，網(wǎng)站利用它在本機(jī)上存儲(chǔ)用戶數(shù)據(jù)。
與 Cookie 相比，Web 存儲(chǔ)的優(yōu)點(diǎn)是：
更安全
更快
存儲(chǔ)更多的數(shù)據(jù)
存儲(chǔ)的數(shù)據(jù)不會(huì)隨每個(gè)服務(wù)器請(qǐng)求一起發(fā)送。只有在被要求時(shí)才包括在內(nèi)。這是 HTML5 Web 存儲(chǔ)超過 Cookie 的一大優(yōu)勢(shì)。
有兩種類型的 Web 存儲(chǔ)對(duì)象：
本地 - 存儲(chǔ)沒有到期日期的數(shù)據(jù)。
會(huì)話 - 僅存儲(chǔ)一個(gè)會(huì)話的數(shù)據(jù)。
如何工作： localStorage 和 sessionStorage 對(duì)象創(chuàng)建一個(gè) key=value 對(duì)。比如： key="Name"， value="Palak"。
這些存儲(chǔ)為字符串，但如果需要，可以使用 JavaScript 函數(shù)（如 parseInt() 和 parseFloat()）進(jìn)行轉(zhuǎn)換。
下面給出了使用 Web 存儲(chǔ)對(duì)象的語(yǔ)法：
存儲(chǔ)一個(gè)值：
localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";
得到一個(gè)值：
alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);
刪除一個(gè)值： -removeItem("key1");
刪除所有值：
localStorage.clear();
應(yīng)用緩存（AppCache）使用 HTML5 AppCache，我們可以使 Web 應(yīng)用程序在沒有 Internet 連接的情況下脫機(jī)工作。除 IE 之外，所有瀏覽器都可以使用 AppCache（截止至此時(shí)）。
應(yīng)用緩存的優(yōu)點(diǎn)是：
網(wǎng)頁(yè)瀏覽可以脫機(jī)
頁(yè)面加載速度更快
服務(wù)器負(fù)載更小
cache manifest 是一個(gè)簡(jiǎn)單的文本文件，其中列出了瀏覽器應(yīng)緩存的資源以進(jìn)行脫機(jī)訪問。 manifest 屬性可以包含在文檔的 HTML 標(biāo)簽中，如下所示：
<html manifest="test.appcache">...
</html>
它應(yīng)該在你要緩存的所有頁(yè)面上。
緩存的應(yīng)用程序頁(yè)面將一直保留，除非：
用戶清除它們
manifest 被修改
緩存更新
視頻在 HTML5 發(fā)布之前，沒有統(tǒng)一的標(biāo)準(zhǔn)來(lái)顯示網(wǎng)頁(yè)上的視頻。大多數(shù)視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁(yè)上顯示視頻的標(biāo)準(zhǔn)方式。
目前，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 和未來(lái)版本的 Chrome 中工作，我們必須添加一個(gè) MPEG4 和 WebM 文件。
video 元素允許多個(gè) source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式，如下所示：
<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 的輸出
音頻對(duì)于音頻，情況類似于視頻。在 HTML5 發(fā)布之前，在網(wǎng)頁(yè)上播放音頻沒有統(tǒng)一的標(biāo)準(zhǔn)。大多數(shù)音頻也通過 Flash 等不同的插件播放。但 HTML5 規(guī)定了通過使用音頻元素在網(wǎng)頁(yè)上播放音頻的標(biāo)準(zhǔn)方式。音頻元素用于播放聲音文件和音頻流。
目前，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 的未來(lái)版本中使 audio 工作，我們必須添加一個(gè) MP3 和 Wav 文件。
audio 元素允許多個(gè) source 元素，它可以鏈接到不同的音頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式，如下所示：
<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）要在網(wǎng)頁(yè)上創(chuàng)建圖形，HTML5 使用 畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網(wǎng)絡(luò)下載圖像而提高網(wǎng)站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁(yè)面，如下所示：
<canvas id="myCanvas" width="200" height="100"></canvas>
畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來(lái)實(shí)現(xiàn)繪制。所有繪畫應(yīng)在 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 所示。
你可以繪制許多對(duì)象，如弧、圓、線/垂直梯度等。
為了有效操作，所有熟練的或業(yè)余的 Web 開發(fā)人員/設(shè)計(jì)人員都應(yīng)該使用 HTML5 工具，當(dāng)需要設(shè)置工作流/網(wǎng)站或執(zhí)行重復(fù)任務(wù)時(shí)，這些工具非常有幫助。它們提高了網(wǎng)頁(yè)設(shè)計(jì)的可用性。
以下是一些幫助創(chuàng)建很棒的網(wǎng)站的必要工具。
HTML5 Maker： 用來(lái)在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動(dòng)畫等。
Liveweave： 用來(lái)測(cè)試代碼。它減少了保存代碼并將其加載到屏幕上所花費(fèi)的時(shí)間。在編輯器中粘貼代碼即可得到結(jié)果。它非常易于使用，并為一些代碼提供自動(dòng)完成功能，這使得開發(fā)和測(cè)試更快更容易。
Font dragr： 在瀏覽器中預(yù)覽定制的 Web 字體。它會(huì)直接載入該字體，以便你可以知道看起來(lái)是否正確。也提供了拖放界面，允許你拖動(dòng)字形、Web 開放字體和矢量圖形來(lái)馬上測(cè)試。
HTML5 Please： 可以讓我們找到與 HTML5 相關(guān)的任何內(nèi)容。如果你想知道如何使用任何一個(gè)功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設(shè)備的有用資源的列表，語(yǔ)法，以及如何使用元素的一般建議等。
Modernizr： 這是一個(gè)開源工具，用于給訪問者瀏覽器提供最佳體驗(yàn)。使用此工具，你可以檢測(cè)訪問者的瀏覽器是否支持 HTML5 功能，并加載相應(yīng)的腳本。
Adobe Edge Animate： 這是必須處理交互式 HTML 動(dòng)畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡(luò)和廣告領(lǐng)域。此工具允許用戶創(chuàng)建無(wú)瑕疵的動(dòng)畫，可以跨多個(gè)設(shè)備運(yùn)行。
Video.js： 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站，你應(yīng)該使用此工具。它使視頻看起來(lái)不錯(cuò)，并且是網(wǎng)站的一部分。
The W3 Validator： W3 驗(yàn)證工具測(cè)試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標(biāo)記的有效性。要測(cè)試任何網(wǎng)站的標(biāo)記有效性，你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁(yè)的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯(cuò)誤和警告。
HTML5 Reset： 此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問者提供一個(gè)良好的網(wǎng)絡(luò)體驗(yàn)。
Palak Shah
作者是高級(jí)軟件工程師。她喜歡探索新技術(shù)，學(xué)習(xí)創(chuàng)新概念。她也喜歡哲學(xué)。你可以通過 palak311@gmail.com[1] 聯(lián)系她。
via: http://opensourceforu.com/2017/06/introduction-to-html5/
作者：Palak Shah[2] 譯者：geekpi 校對(duì)：wxy
本文由 LCTT 原創(chuàng)編譯，Linux中國(guó) 榮譽(yù)推出
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
