HTML5 2

時間 2019-11-09

標籤 html5 html 欄目 HTML5 简体版

原文原文鏈接

複習：前端

HTML5新特性：web

(1)新的語義標籤和屬性面試

(2)表單新特性canvas

1)新的input type——10個瀏覽器

email、url、number、tel、search、range、color、date、month、week服務器

2)新的表單元素——4個ide

datalist、progress、meter、outputsvg

3)表單元素的新屬性——12個oop

autocomplete、autofocus、placeholder、multiple、formpost

required、maxlength、minlength、max、min、step、pattern

(3)視頻和音頻

(4)Canvas繪圖

(5)SVG繪圖

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

今日目標：

(1)視頻和音頻 —— 簡單必須掌握

(2)Canvas繪圖 —— 重點&難點

1.面試題：Flash被HTML5取代在哪些方面？

音頻和視頻 —— <video>和<audio>

繪圖 —— <canvas>

動畫/遊戲 —— <canvas>+定時器

統計圖表 —— <canvas>、<svg>

客戶端數據存儲 —— WebStorage

2.HTML5新特性——視頻播放

HTML5提供了一個新的標籤<video>標籤，用於播放視頻。該標籤默認是一個300*150的inline-block。使用方法：

<video>

</video>

VIDEO元素/對象的屬性：

(1)src：指定要播放的視頻的資源路徑

(2)autoplay：false，是否自動播放

(3)controls：false，是否顯示播放控件，提示：不一樣瀏覽器的播放控件外觀不一樣

(4)currentTime：0，當前播放的時間點（s）

(5)duration：60，影片總時長（s）

(6)ended：false，是否播放到結尾

(7)loop：false，是否循環播放

(8)muted：false，是否靜音

(9)volume：1，音量設置（0~1），對象屬性，不用於標籤

(10)paused：當前是否處於暫停狀態

(11)poster：''，指定視頻第一幀播放前的電影海報

(12)preload：指定視頻預加載方案，可取值：

auto：默認值，自動預加載視頻的寬高、時長、第一幀內容、並緩衝了必定的時長

metadata：元數據，只預加載視頻的寬高、時長、第一幀內容

none：不預加載任何內容

VIDEO對象的方法：

play()：開始播放

pause()：暫停播放

VIDEO對象的事件：

onplay：視頻開始播放（可能多種緣由引發）

onpause：視頻開始暫停（可能多種緣由引發）

onplaying:

練習：

(1)不使用video默認的播放控件，使用自定義的按鈕，控制視頻的播放和暫停

(2)不論何種緣由，影片一暫停即顯示出廣告圖片；一播放廣告圖片就隱藏；提示：不能使用poster屬性（影片海報只能在第一次播放以前顯示一次）

午間思考：如何將video做爲DIV的背景並自動播放？

3.HTML5新特性——音頻播放

HTML5提供了一個新的標籤<audio>標籤，用於播放音頻。該標籤若沒有controls屬性，則默認display:none；反之則是一個300*30的inline-block。使用方法：

<audio>

</audio>

AUDIO元素/對象的屬性：

(1)src：指定要播放的視頻的資源路徑

(2)autoplay：false，是否自動播放

(3)controls：false，是否顯示播放控件，提示：不一樣瀏覽器的播放控件外觀不一樣

(4)currentTime：0，當前播放的時間點（s）

(5)duration：60，影片總時長（s）

(6)ended：false，是否播放到結尾

(7)loop：false，是否循環播放

(8)muted：false，是否靜音

(9)volume：1，音量設置（0~1），對象屬性，不用於標籤

(10)paused：當前是否處於暫停狀態

(12)preload：指定視頻預加載方案，可取值：

auto：默認值，自動預加載視頻的寬高、時長、第一幀內容、並緩衝了必定的時長

metadata：元數據，只預加載視頻的寬高、時長、第一幀內容

none：不預加載任何內容

AUDIO對象的方法：

play()：開始播放

pause()：暫停播放

AUDIO對象的事件：

onplay：視頻開始播放（可能多種緣由引發）

onpause：視頻開始暫停（可能多種緣由引發）

onplaying:

練習：爲網頁添加自動播放的背景音樂，用戶可選暫停或繼續

可使用定時器修改audio.volume屬性實現音量淡入和淡出。

提示：

(1)<body bgsound="x.mp3">屬性是老IE的專有屬性，也能夠用於播放背景音樂，但音量、靜音、暫停、中止都沒法精準的控制。其它瀏覽器不支持此屬性。

(2)當前iOS中的Safari瀏覽器默認不支持audio標籤！只能使用video標籤代替。

4.Web前端中可用的繪圖技術

在網頁中繪圖可使用的功能：

(1)實時走勢圖

(2)統計圖表

(3)隨機內容的圖片

(4)在線畫圖板

(5)HTML5遊戲——2D/3D

可用的繪圖技術：

(1)Canvas技術 —— 專用於繪製2D圖形/圖像

(2)SVG技術 —— 專用於繪製矢量圖

(3)WebGL技術 —— 目前不是HTML5標準技術，功能最強大，3D圖形/圖像

5.Canvas繪圖技術 —— 最重要&難點

難點： (1)小學/中學數學知識 (2)單詞記憶

HTML5引入了<canvas>標籤用於繪圖，默認是一個300*150的inline-block。使用width/height屬性指定尺寸，但不能使用CSS樣式指定寬和高！

您的瀏覽器不支持Canvas標籤！

</canvas>

往「畫布」上繪圖須要使用其對應的「畫筆」對象：

var ctx = c.getContext('2d'); //繪圖上下文——「畫筆」

接下來全部的繪圖任務都由畫筆實現。

Content：內容

Context：上下文

繪圖上下文對象的經常使用屬性——console.log(ctx)：

fillStyle：'#000'，填充樣式

strokeStyle：'#000'，描邊/輪廓樣式

lineWidth：1，描邊/輪廓的寬度

font：'10px sans-serif'，繪製文本所用的字號/字體

textBaseline：'alphabetic'，文本對齊的基線

showdowOffsetX：0，陰影水平偏移量

showdowOffsetY：0，陰影豎直偏移量

showdowColor：'rgba(0,0,0,0)'，陰影顏色

showdowBlur：0，陰影模糊半徑

6.使用Canvas繪製矩形

提示：矩形的定位點在本身左上角

ctx.fillStyle = '#000' 填充顏色

ctx.strokeStyle = '#000' 描邊顏色

ctx.fillRect(x,y,w,h) 填充一個矩形

ctx.strokeRect(x,y,w,h) 描邊一個矩形

ctx.clearRect(x,y,w,h) 清除一個矩形範圍內的全部內容

練習：在600*400的畫布上繪圖 —— 16:10

(1)左上角填充一個矩形100*80，默認顏色

(2)右上角描邊一個矩形100*80，默認顏色

(3)左下角填充一個矩形100*80，紅色

(4)右下角描邊一個矩形100*80，青色

(5)正中央填充+描邊一個矩形100*80，注意是什麼顏色

(6)從新建立一個畫布，使用定時器，繪製一個能夠不斷向右移動的矩形

(7)繪製一個斜向30度角移動的矩形

課下挑戰性任務：繪製一個繞圓形路徑移動的矩形

7.使用Canvas繪製文本

提示：文字的定位點默認在文本基線的起點(左側)

ctx.textBaseline = 'alphabetic' 文本基線，可取爲top/bottom/middle/alphabetic

ctx.fillText(txt, x, y) 填充文本

ctx.strokeText(txt, x, y) 描邊文本

ctx.measureText(txt).width 測量，根據當前指定的字號和字體計算指定文本的寬度

練習：繪製文本

(1)在左下角繪製一行文本

(2)在右下角描邊一行文本

(3)在畫布中央繪製一個能夠向右移動的文本，向戶外LED招牌同樣

課下挑戰性任務：繪製能夠畫布上左右移動的文字

8.使用Canvas繪製路徑

下次課內容

9.使用Canvas繪製圖像

下次課內容

10.爲圖形文字添加陰影

ctx.shadowColor = '#666'; //陰影顏色

ctx.shadowOffsetX = 8; //陰影偏移量

ctx.shadowOffsetY = 8;

ctx.shadowBlur = 10; //陰影模糊半徑

11.在繪圖時使用漸變色

//建立漸變對象

var g = ctx.createLinearGradient(50,100, 550,100);

g.addColorStop(0, '#f00'); //添加顏色點

g.addColorStop(1, '#0f0'); //添加顏色點

//使用漸變對象

ctx.fillStyle = g;

ctx.strokeStyle = g;

課後練習：

(1)使用視頻作DIV元素的背景

提示：Video自動播放、循環播放、靜音，絕對定位到目標元素下面，z-index爲負值便可

(2)使用AJAX從服務器端的PHP頁面獲取以下的JSON數據：

[

{"label": "部門1", "value":300},

{"label": "部門2", "value":500},

{"label": "部門3", "value":150},

{"label": "部門4", "value":400},

{"label": "部門5", "value":550},

{"label": "部門6", "value":250}

]

根據這些數據，繪製出以下圖所示的統計圖：

提示：爲簡化起見，能夠把value值看作每一個柱的高度。

挑戰性需求：柱子初次顯示時，高度有動畫效果。

1. HTML5遊戲2
2. HTML5+CSS3 2
3. HTML5基礎（2）
4. HTML5+CSS3 (2)
5. HTML5+移動APP（2）
6. HTML5 – 2.新元素
7. HTML5 Canvas筆記 -- 2
8. HTML5(2)__初識H5
9. 【html5】html5學習筆記2--表單
10. 2.html5的基本格式
更多相關文章...
• Thymeleaf擴展2(Say Hello) - Thymeleaf 教程
• QBC的2種檢索方式 - Hibernate教程
• C# 中 foreach 遍歷的用法
• RxJava操作符（二）Transforming Observables

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。