HTML5

一、什么是 HTML5？

  • HTML5 是最新的 HTML 標(biāo)準(zhǔn)；
  • HTML5 是專(zhuān)門(mén)為承載豐富的 web 內(nèi)容而設(shè)計(jì)的，并且無(wú)需額外插件；
  • HTML5 擁有新的語(yǔ)義、圖形以及多媒體元素；
  • HTML5 提供的新元素和新的 API 簡(jiǎn)化了 web 應(yīng)用程序的搭建；
  • HTML5 是跨平臺(tái)的，被設(shè)計(jì)為在不同類(lèi)型的硬件（PC、平板、手機(jī)、電視機(jī)等等）之上運(yùn)行；

二、HTML5的一些新特性

  • 用于繪畫(huà)的 canvas 元素；
  • 用于媒介回放的 video 和 audio 元素；
  • 對(duì)本地離線存儲(chǔ)的更好的支持；
  • 新的特殊內(nèi)容元素，比如article、footer、header、nav、section；
  • 新的表單控件，比如 calendar、date、time、email、url、search；

三、video 元素

  • <video> 元素提供了播放、暫停和音量控件來(lái)控制視頻；
  • <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸；
  • <video> 與</video> 標(biāo)簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的；

video 元素的三種視頻格式：

  • Ogg：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件；
  • MPEG4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件；
  • WebM：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件；

video 元素的屬性：

  • src：要播放的視頻的 URL；
  • width：設(shè)置視頻播放器的寬度；
  • height：設(shè)置視頻播放器的高度；
  • autoplay：自動(dòng)播放；
  • controls：如果出現(xiàn)該屬性，則向用戶(hù)顯示控件，比如播放按鈕；
  • loop：循環(huán)播放；
  • preload：如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用 "autoplay"，則忽略該屬性；

video 元素的方法：

  • pause()：暫停當(dāng)前播放的視頻；
  • play()：開(kāi)始播放視頻；
  • load()：重新加載視頻元素；
  • canPlayType()：檢測(cè)瀏覽器是否能播放指定的視頻類(lèi)型；
  • addTextTrack()：向音頻/視頻添加新的文本軌道；

四、audio元素

  • HTML5 規(guī)定了在網(wǎng)頁(yè)上嵌入音頻元素的標(biāo)準(zhǔn)，即使用 <audio> 元素；
  • <audio>元素能夠播放聲音文件或者音頻流；

audio元素的三種音頻格式：

  • MP3：適用于Internet Explorer、Chrome、Safari 等瀏覽器；
  • Wav：適用于Firefox、Opera等瀏覽器；
  • Ogg：適用于Firefox、IE9、Chrome 瀏覽器；

audio元素的屬性：

  • src：要播放的音頻的 URL；
  • autoplay：自動(dòng)播放；
  • controls：如果出現(xiàn)該屬性，則向用戶(hù)顯示控件；
  • loop：循環(huán)播放；
  • preload：如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用 "autoplay"，則忽略該屬性；

audio元素的方法：

  • pause()：暫停當(dāng)前播放的音頻；
  • play()：開(kāi)始播放音頻；
  • load()：重新加載音頻；

五、canvas 元素

什么是 Canvas？

  • HTML5 的 canvas 元素通過(guò) JavaScript 在網(wǎng)頁(yè)上繪制圖像，元素本身并沒(méi)有繪制能力，它只是圖形容器，必須使用腳本來(lái)繪制圖形；
  • canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法；
  • 創(chuàng)建一個(gè)畫(huà)布
<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新屬性有：

  • height：設(shè)置 canvas 的高度；
  • width：設(shè)置 canvas 的寬度；

六、繪制三角形

getElementById()：可返回對(duì)擁有指定 ID 的第一個(gè)對(duì)象的引用；
getContext()：返回一個(gè)用于在畫(huà)布上繪圖的環(huán)境，2d表示二維繪圖；
beginPath()：開(kāi)始一條路徑，或重置當(dāng)前的路徑；
moveTo()：把路徑移動(dòng)到畫(huà)布中的指定點(diǎn)，不創(chuàng)建線條。
lineTo()：添加一個(gè)新點(diǎn)，然后創(chuàng)建從該點(diǎn)到畫(huà)布中最后指定點(diǎn)的線條（該方法并不會(huì)創(chuàng)建線條）；
closePath()：創(chuàng)建從當(dāng)前點(diǎn)到開(kāi)始點(diǎn)的路徑；
strokeStyle屬性：設(shè)置或返回用于筆觸的顏色、漸變或模式；
stroke()：會(huì)實(shí)際地繪制出路徑；
fillStyle屬性：設(shè)置或返回用于填充繪畫(huà)的顏色、漸變或模式；
fill()：填充當(dāng)前的圖像（路徑），默認(rèn)顏色是黑色；

//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或閉合 需要先閉合路徑才能畫(huà)
cxt.strokeStyle="red";
cxt.stroke();

//實(shí)心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示圖


圖1

七、使用Canvas繪制一個(gè)空心圓

arc()：創(chuàng)建弧或曲線（用于創(chuàng)建圓或部分圓）；

<body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
  var can=document.getElementById("myCanvas") 
  var ctx=can.getContext("2d");  //創(chuàng)建context對(duì)象
  ctx.beginPath();//標(biāo)志開(kāi)始一個(gè)路徑
  ctx.arc(100,100,50,0,2*Math.PI);//在canvas中繪制圓形
  ctx.stroke()
 </script>

演示圖


圖2

八、繪制一個(gè)實(shí)心圓

<body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  ctx.beginPath();
  ctx.arc(100,100,50,0,2*Math.PI);
  ctx.fillStyle="#deffff";
  ctx.fill();
  ctx.strokeStyle="red"
  ctx.stroke();
 </script>

演示圖


圖3

九、繪制一個(gè)空心矩形

strokeRect()：繪制矩形（不填色），筆觸的默認(rèn)顏色是黑色；

<body>
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
  var can=document.getElementById("myCanvas");    //獲得畫(huà)板數(shù)據(jù)
  var ctx=can.getContext('2d');   //獲得筆刷
     ctx.strokeStyle="blue";         //設(shè)置線條顏色
     ctx.strokeRect(100,100,100,100);     //線條畫(huà)矩形
 </script>

演示圖


圖4

十、繪制一個(gè)實(shí)心的矩形

fillRect()：繪制“已填色”的矩形，默認(rèn)的填充顏色是黑色；

<body>
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//獲得畫(huà)板數(shù)據(jù)
var ctx=can.getContext('2d');    //獲得筆刷
   ctx.strokeStyle="blue";      //設(shè)置線條顏色
   ctx.fillStyle="#ddedee";     //填充矩形
   ctx.fillRect(100,100,100,100);
   ctx.strokeRect(100,100,100,100);//線條畫(huà)矩形
 </script>

演示圖


圖5
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 棧的定義 棧(stack)是限定僅在表尾進(jìn)行插入和刪除操作的線性表。允許插入和刪除的一端稱(chēng)為棧頂(top),另一端...
    KD小帥閱讀 196評(píng)論 0贊 0
  • 不知道為什么，我執(zhí)意想要寫(xiě)下這篇文章?；蛟S是因?yàn)橐粋€(gè)朋友給了我感觸，也可能是下午嬉戲打鬧的時(shí)候給了我靈感，讓我必...
    旅館的貓閱讀 315評(píng)論 6贊 5
  • 圓括號(hào) 在條件判斷以及循環(huán)中，大多數(shù)圓括號(hào)都可以省略掉 if語(yǔ)句 Swift中的if語(yǔ)句和C/C++一樣，只不過(guò)多...
    土豆吞噬者閱讀 453評(píng)論 0贊 0
  • 前天小米公司董事長(zhǎng)雷軍發(fā)了一條關(guān)于明天獨(dú)立品牌Redmi手機(jī)新品的短微，標(biāo)題就一句話:生死看淡，不服就干。 人生需...
    略懂科技閱讀 767評(píng)論 0贊 4

友情鏈接更多精彩內(nèi)容