01-HTML5講義
瞭解HTML5
HTML5屬於上一代HTML的新迭代語言，設計HTML5最主要的目的是爲了在移動設備上支持多媒體！！！
例如： video 標籤和 audio 及 canvas 標記
◆ 新特性：
1. 取消了過期的顯示效果標記 <font></font> 和 <center></center> ...
2. 新表單元素引入
3. 新語義標籤的引入
4. canvas標籤（圖形設計）
5. 本地數據庫（本地存儲）
6. 一些API
◆ 好處：
1. 跨平臺
例如：好比你開發了一款HTML5的遊戲，你能夠很輕易地移植到UC的開放平臺、Opera的遊戲中心、Facebook應用平臺，甚至能夠經過封裝的技術發放到App Store或Google Play上，因此它的跨平臺性很是強大，這也是大多數人對HTML5有興趣的主要緣由。
◆ 缺點：
1. pc端瀏覽器支持不是特別友好，形成用戶體驗不佳
新語義標籤
http://www.w3school.com.cn/html/html5_semantic_elements.aspjavascript
<header></header> <footer></footer> <article></article> <aside></aside> <nav></nav> <section></section> ....
語義標籤兼容性處理
解決方案一：經過建立元素的方式，而後將元素轉化爲塊級元素便可css
document.createElement("header");
解決方案二：經過引用第三方js插件方式(本質也是用createElement方式)html
<!--[if lte IE 8]>
<script type="text/javascript" src="html5shiv.min.js"></script>
<![endif]-->
多媒體標籤及屬性介紹
☞<video></video> 視頻
屬性：controls 顯示控制欄
屬性：autoplay 自動播放
屬性：loop 設置循環播放
☞<audio></audio> 音頻
屬性：controls 顯示控制欄
屬性：autoplay 自動播放
屬性：loop 設置循環播放
☞video標籤支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp
☞ 多媒體標籤在網頁中的兼容效果方式html5
<video>
<source src="code/多媒體標籤/trailer.mp4">
<source src="trailer.ogg">
<source src="trailer.WebM">
</video>
新表單元素及屬性
智能表單控件
<input type="email"> email: 輸入合法的郵箱地址 url： 輸入合法的網址 number： 只能輸入數字 range： 滑塊 color： 拾色器 date： 顯示日期 month： 顯示月份 week ： 顯示第幾周 time： 顯示時間
表單屬性
◆ form屬性：
autocomplete = on(默認) | off 自動完成
novalidate = true(默認) | false 是否關閉校驗
◆ input屬性：
autofocus： 自動獲取焦點
placeholder： 佔位符 （提示信息）
multiple： 實現多選效果
form：規定輸入字段所屬的一個或多個表單。
<form id="test">
<input type="text" form="test" />
</form>
<input type="text" form="test" />
list：
<input type="text" list="abc"/>
<datalist id="abc">
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>
required： 必填項, oninvalid="setCustomValidity('必填內容')"
<form action="" method="get">
<input type="text" name="uname" pattern="^\d{4,11}" required class="uname">
</form>
<script type="text/javascript">
var input=document.querySelector(".uname");
input.oninvalid=function(){
if(this.validity.patternMismatch===true){
this.setCustomValidity("請輸入4到11爲數字");
}else{
this.setCustomValidity("");
}
}
</script>
HTMl5中的API
獲取頁面元素及類名操做和自定義屬性
☞ document.querySelector("選擇器")；
備註：
選擇器： 能夠是css中的任意一種選擇器
經過該選擇器只能選中第一個元素。
☞ document.querySelectorAll("選擇器");
備註： 與document.querySelector區別： querySelectorAll 能夠選中全部符合選擇器規則的元素，返回的是一個列表。querySelector返回的只是單獨的一個元素
☞ Dom.classList.add("類名"): 給當前dom元素添加類樣式
☞ Dom.classList.remove("類名"); 給當前dom元素移除類樣式
☞ Dom.classList.contains("類名"); 檢測是否包含類樣式
☞ Dom.classList.toggle("active"); 切換類樣式（有就刪除，沒有就添加）
☞ 自定義屬性
data-自定義屬性名
備註：
在標籤中，以data-自定義名稱
1. 獲取自定義屬性 Dom.dataset 返回的是一個對象
Dom.dataset.屬性名 或者 Dom.dataset[屬性名]
注意：屬性名是不包含data-
2. 設置自定義屬性
Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值；
文件讀取
☞ FileReader
FileReader 接口有3個用來讀取文件方法返回結果在result中
readAsBinaryString ---將文件讀取爲二進制編碼
readAsText ---將文件讀取爲文本
readAsDataURL ---將文件讀取爲DataURL
☞ FileReader 提供的事件模型
onabort 中斷時觸發
onerror 出錯時觸發
onload 文件讀取成功完成時觸發
onloadend 讀取完成觸發，不管成功或失敗
onloadstart 讀取開始時觸發
onprogress 讀取中
<input type="file" name="">
<script type="text/javascript">
var input=document.querySelector("input");
input.onchange=function(){
//獲取到文件
var file=this.files[0];
//開始讀取，建立讀取器
var reader=new FileReader();
//開始讀取
reader.readAsText(file);
//獲取讀取的結果
//當文件讀取完成後，才能夠獲取文件信息內容
reader.onload=function() {
console.log(reader.result);
}
}
</script>
獲取網絡狀態
☞ 獲取當前網絡狀態
window.navigator.onLine 返回一個布爾值
☞ 網絡狀態事件
1. window.ononline
2. window.onoffline
本地存儲
☞ 發展：
隨着互聯網的快速發展，基於網頁的應用愈來愈廣泛，同時也變的愈來愈複雜，爲了知足各類各樣的需求，會常常性在本地存儲大量的數據，傳統方式咱們以document.cookie來進行存儲的，可是因爲其存儲大小隻有4k左右，而且解析也至關的複雜，給開發帶來諸多不便，HTML5規範則提出解決方案，使用sessionStorage和localStorage存儲數據。
☞ localStorage：
1. 永久生效
2. 多窗口共享
3. 容量大約爲20M
◆ window.localStorage.setItem(key,value) 設置存儲內容
◆ window.localStorage.getItem(key) 獲取內容
◆ window.localStorage.removeItem(key) 刪除內容
◆ window.localStorage.clear() 清空內容
☞ sessionStorage：
1. 生命週期爲關閉當前瀏覽器窗口
2. 能夠在同一個窗口下訪問
3. 數據大小爲5M左右
◆ window.sessionStorage.setItem(key,value)
◆ window.sessionStorage.getItem(key)
◆ window.sessionStorage.removeItem(key)
◆ window.sessionStorage.clear()
操做多媒體
http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.aspjava
注意：
chrome已再也不支持html中audio/video標籤的autoplay屬性,聽說是忽然播放聲音怕到你，信？
◆ video 可配合muted(靜音)屬性可播放，或是video.play()；
◆ audio 就是不能夠不能夠不能夠
設置方法：(網友給的，不過我就是找不到「Autoplay policy」，嗯...)
一、在chrome瀏覽器地址欄中輸入：chrome://flags
二、搜索「Autoplay policy」，默認爲「Default」，修改成 「No user gesture is required」 就能夠了
Canvas畫布
繪圖工具
☞ 介紹canvas畫布
☞ 設置畫布大小： 使用屬性方式設置
☞ 解決畫布重繪問題
1. 設置一次描邊
2. 開啓新的圖層 ctx.beginPath();
繪圖方法
步驟：落筆(找落筆點座標) -- 連線 -- 描邊chrome
ctx.moveTo(x,y) 落筆 ctx.lineTo(x,y) 連線 ctx.stroke() 描邊 ctx.beginPath()； 開啓新的圖層 顏色： strokeStyle="值" 線寬： lineWidth="值" 備註：不須要帶單位 線鏈接方式： lineJoin: round | bevel | miter (默認) 線帽（線兩端的結束方式/圓角）： lineCap: butt(默認值) | round | square 閉合路徑： ctx.closePath()
漸變方案
☞ 線性漸變
var grd=ctx.createLinearGradient(x0,y0,x1,y1);
說明：
x0-->漸變開始的x座標
y0-->漸變開始的y座標
x1-->漸變結束的x座標
y1-->漸變結束的y座標
grd.addColorStop(0,"black"); 設置漸變的開始顏色
grd.addColorStop(0.1,"yellow"); 設置漸變的中間顏色
grd.addColorStop(1,"red"); 設置漸變的結束顏色
ctx.strokeStyle=grd;
ctx.stroke();
備註：
addColorStop(offse,color);
漸變的開始位置和結束位置介於0-1之間，0表明開始，1表明結束。中間能夠設置任何小數
☞ 徑向漸變
ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);
說明：
(x0,y0)：漸變的開始圓的 x,y 座標
r0：開始圓的半徑
(x1,y1)：漸變的結束圓的 x,y 座標
r1：結束圓的半徑
填充效果
ctx.fill(); 設置填充效果
ctx.fillStyle="值"; 設置填充顏色
非零環繞原則
☞ 繪製一個以下圖形
☞ 非零環繞原則：
1. 任意找一點，越簡單越好
2. 以點爲圓心，繪製一條射線，越簡單越好（相交的邊越少越好）
3. 以射線爲半徑順時針旋轉，相交的邊同向記爲+1，反方向記爲-1，若是相加的區域等於0，則不填充。
4. 非零區域填充
繪製虛線
原理：設置虛線其實就是設置實線與空白部分直接的距離,利用數組描述其中的關係
例如： [10,10] 實線部分10px 空白部分10px
例如： [10,5] 實線部分10px 空白部分5px
例如： [10,5,20] 實線部分10px 空白5px 實線20px 空白部分10px 實線5px 空白20px
繪製：
ctx.setLineDash(數組);
ctx.stroke();
例如：
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.setLineDash([2,4]);
ctx.stroke();
注意：
若是要將虛線改成實線，只要將數組改成空數組便可。
繪製動畫效果
☞ 繪製一個描邊矩形： ctx.strokeRect(x, y, width, height)
☞ 繪製一個填充矩形： ctx.fillRect(x, y, width, height)
☞ 清除： ctx.clearRect(x, y, width, height)
☞ 實現動畫效果：
1. 先清屏
2. 繪製圖形
3. 處理變量
繪製文本
☞繪製填充文本
ctx.fillText(文本的內容,x,y)
☞繪製鏤空文本
ctx.strokeText();
☞設置文字大小：
ctx.font="20px 微軟雅黑"
備註： 該屬性設置文字大小，必須按照cssfont屬性的方式設置
☞文字水平對齊方式【文字在圓心點位置的對齊方式】
ctx.textAlign="left | right | center"
☞文字垂直對齊方式
ctx.textBaseline="top | middle | bottom | alphabetic(默認)"
☞文字陰影效果
ctx.shadowColor="red"; 設置文字陰影的顏色
ctx.ShadowOffsetX=值; 設置文字陰影的水平偏移量
ctx.shadowOffsetY=值; 設置文字陰影的垂直偏移量
ctx.shadowBlur=值; 設置文字陰影的模糊度(值越大越模糊)
繪製圖片
☞ 將圖片繪製到畫布的指定位置(圖片加載完成再繪製)
ctx.drawImage(圖片對象,x,y);
☞ 將圖片繪製到指定區域大小的位置（x,y指的是矩形區域的開始座標，width和height指的是矩形區域的大小）
ctx.drawImage(圖片對象,x,y,width,height);
☞ 將圖片的指定區域繪製到指定矩形區域內
ctx.drawImage(圖片對象, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);
sx,sy 指的是要從圖片哪塊區域開始繪製，swidth，sheight是指截取圖片區域的大小
dx,dy 是指繪製區域的位置，dwidth,dheight是指繪製區域的大小
☞ 解決圖片繪製到某一個區域的按原比例縮放繪製(失真效果):
讓繪製的寬高比等於原始圖片寬高比
繪製圓弧
☞ ctx.arc(x,y,radius,startradian,endradian[,direct]);
說明：
x, y 圓心的座標
radius 半徑
startradian 開始弧度（角度和弧度的關係： 角度:弧度= 180 : Math.PI）
endradian 結束弧度
direct 方向（默認順時針false） true 表明逆時針
☞ 0度角在哪？
以圓心爲中心向右爲0角 順時針爲正，逆時針爲負
☞ 特殊值：
0度 = 0弧度
45度 = Math.PI / 4
60度 = Math.PI / 3
90度 = Math.PI / 2
180度 = Math.PI
360度 = 2 * Math.PI
☞ 繪製圓上任意點:（注意：弧度，角度和弧度的關係： 角度:弧度= 180 : Math.PI）
公式：
x = ox + r * Math.cos(弧度)
y = oy + r * Math.sin(弧度)
ox: 圓心的橫座標
oy: 圓心的縱座標
r： 圓的半徑
平移【座標系圓點的平移】
ctx.translate(x,y);
特色：
經過該方法能夠將畫布原點的位置進行從新設置。
注意：
1. translate(x,y) 中不能設置一個值
2. 與moveTo(x,y) 的區別：
moveTo(x,y) 指的是將畫筆的落筆點的位置改變，而座標系中的原點位置並無發生改變
translate(x,y) 是將畫布座標系中的原點位置發生改變
旋轉【座標系旋轉】
ctx.rotate(弧度) （注意是弧度，角度和弧度的關係： 角度:弧度= 180 : Math.PI）
伸縮
ctx.scale(x,y)
備註：
沿着x軸和y軸縮放
x,y 爲倍數 例如: 0.5 1
相關文章
- 1. Android講義第一講
- 2. Struts2講義18
- 3. Struts2講義24
- 4. Struts2講義23
- 5. OKHTTP講義
- 6. Struts2講義16
- 7. Struts2講義15
- 8. Struts2講義32
- 9. Struts2講義29
- 10. Struts2講義21
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • Web 語義化 - 網站建設指南
- • RxJava操作符（十）自定義操作符
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Android講義第一講
- 2. Struts2講義18
- 3. Struts2講義24
- 4. Struts2講義23
- 5. OKHTTP講義
- 6. Struts2講義16
- 7. Struts2講義15
- 8. Struts2講義32
- 9. Struts2講義29
- 10. Struts2講義21