01-HTML5基礎
了解HTML5
?HTML5屬于上一代HTML的新迭代語言信柿,設計HTML5最主要的目的是為了在移動設備上支持多媒體H筇荨>视琛!
例如: video 標簽和 audio 及 canvas 標記
? 新特性:
1. 取消了過時的顯示效果標記 <font></font> 和 <center></center> ...
2. 新表單元素引入
3. 新語義標簽的引入
4. canvas標簽(圖形設計)
5. 本地數(shù)據(jù)庫(本地存儲)
6. 一些API
? 好處:
1. 跨平臺
例如:比如你開發(fā)了一款HTML5的游戲蝌数,你可以很輕易地移植到UC的開放平臺、Opera的游戲中心痹仙、Facebook應用平臺闷游,甚至可以通過封裝的技術發(fā)放到App Store或Google Play上,所以它的跨平臺性非常強大烙样,這也是大多數(shù)人對HTML5有興趣的主要原因冯遂。
? 缺點:
1. pc端瀏覽器支持不是特別友好,造成用戶體驗不 佳
新語義標簽
網(wǎng)頁布局結(jié)構(gòu)標簽及兼容處理
<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>
....
http://www.w3school.com.cn/html/html5_semantic_elements.asp
多媒體標簽及屬性介紹
? <video></video> 視頻
屬性:controls 顯示控制欄
屬性:autoplay 自動播放
屬性:loop 設置循環(huán)播放
? <audio></audio> 音頻
屬性:controls 顯示控制欄
屬性:autoplay 自動播放
屬性:loop 設置循環(huán)播放
? video標簽支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp
? 多媒體標簽在網(wǎng)頁中的兼容效果方式
<video>
<source src="code/多媒體標簽/trailer.mp4">
<source src="trailer.ogg">
<source src="trailer.WebM">
</video>
新表單元素及屬性
智能表單控件
<input type="email">
email: 輸入合法的郵箱地址
url: 輸入合法的網(wǎng)址
number: 只能輸入數(shù)字
range: 滑塊
color: 拾色器
date: 顯示日期
month: 顯示月份
week : 顯示第幾周
time: 顯示時間
表單屬性
◆form屬性:
autocomplete=on | off 自動完成
novalidate=true | false 是否關閉校驗
◆ input屬性:
*autofocus : 自動獲取焦點
form:
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>
multiple: 實現(xiàn)多選效果
*placeholder : 占位符 (提示信息)
*required: 必填項
HTMl5中的API
獲取頁面元素及類名操作和自定義屬性
? document.querySelector("選擇器")谒获;
備注:
選擇器: 可以是css中的任意一種選擇器
通過該選擇器只能選中第一個元素蛤肌。
? document.querySelectorAll("選擇器");
備注:
與document.querySelector區(qū)別: querySelectorAll 可以選中所有符合選擇器規(guī)則的元素,返回的是一個列表批狱。querySelector返回的只是單獨的一個元素
? Dom.classList.add("類名"): 給當前dom元素添加類樣式
? Dom.classList.remove("類名"); 給當前dom元素移除類樣式
? classList.contains("類名"); 檢測是否包含類樣式
? classList.toggle("active"); 切換類樣式(有就刪除裸准,沒有就添加)
? 自定義屬性 (小案例分析體驗自定義屬性)
data-自定義屬性名
備注:
在標簽中,以data-自定義名稱
1. 獲取自定義屬性 Dom.dataset 返回的是一個對象
Dom.dataset.屬性名 或者 Dom.dataset[屬性名]
注意:
屬性名是不包含data-
2. 設置自定義屬性
Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值精耐;
文件讀取
? FileReader
FileReader 接口有3個用來讀取文件方法返回結(jié)果在result中
readAsBinaryString ---將文件讀取為二進制編碼
readAsText ---將文件讀取為文本
readAsDataURL ---將文件讀取為DataURL
? FileReader 提供的事件模型
onabort 中斷時觸發(fā)
onerror 出錯時觸發(fā)
onload 文件讀取成功完成時觸發(fā)
onloadend 讀取完成觸發(fā)狼速,無論成功或失敗
onloadstart 讀取開始時觸發(fā)
onprogress 讀取中
? 分析讀取圖片小案例
獲取網(wǎng)絡狀態(tài)
? 獲取當前網(wǎng)絡狀態(tài)
window.navigator.onLine 返回一個布爾值
? 網(wǎng)絡狀態(tài)事件
1. window.ononline
2. window.onoffline
獲取地理定位
? 獲取一次當前位置
window.navigator.geolocation.getCurrentPosition(success,error);
1. coords.latitude 維度
2. coords.longitude 經(jīng)度
? 實時獲取當前位置
window.navigator.geolocation.watchPosition(success,error);
? 分析地理定位小案例
本地存儲
?發(fā)展:
隨著互聯(lián)網(wǎng)的快速發(fā)展,基于網(wǎng)頁的應用越來越普遍卦停,同時也變的越來越復雜向胡,為了滿足各種各樣的需求,會經(jīng)常性在本地存儲大量的數(shù)據(jù)惊完,傳統(tǒng)方式我們以document.cookie來進行存儲的僵芹,但是由于其存儲大小只有4k左右,并且解析也相當?shù)膹碗s小槐,給開發(fā)帶來諸多不便拇派,HTML5規(guī)范則提出解決方案荷辕,使用sessionStorage和localStorage存儲數(shù)據(jù)。
? localStorage:
1. 永久生效
2. 多窗口共享
3. 容量大約為20M
◆window.localStorage.setItem(key,value) 設置存儲內(nèi)容
◆window.localStorage.getItem(key) 獲取內(nèi)容
◆window.localStorage.removeItem(key) 刪除內(nèi)容
◆window.localStorage.clear() 清空內(nèi)容
? sessionStorage:
1. 生命周期為關閉當前瀏覽器窗口
2. 可以在同一個窗口下訪問
3. 數(shù)據(jù)大小為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.asp
Canvas畫布
繪圖工具
? 介紹canvas畫布
? 設置畫布大屑恪: 使用屬性方式設置
? 解決畫布重繪問題
1. 設置一次描邊
2. 開啟新的圖層
繪圖方法
ctx.moveTo(x,y) 落筆
ctx.lineTo(x,y) 連線
ctx.stroke() 描邊
ctx.beginPath()疮方; 開啟新的圖層
演示: strokeStyle="值"
線寬: linewidth="值" 備注:不需要帶單位
線連接方式: lineJoin: round | bevel | miter (默認)
線帽(線兩端的結(jié)束方式): lineCap: butt(默認值) | round | square
閉合路徑: ctx.closePath()
漸變方案
? 線性漸變
var grd=ctx.createLinearGradient(x0,y0,x1,y1);
x0-->漸變開始的x坐標
y0-->漸變開始的y坐標
x1-->漸變結(jié)束的x坐標
y1-->漸變結(jié)束的y坐標
grd.addColorStop(0,"black"); 設置漸變的開始顏色
grd.addColorStop(0.1,"yellow"); 設置漸變的中間顏色
grd.addColorStop(1,"red"); 設置漸變的結(jié)束顏色
ctx.strokeStyle=grd;
ctx.stroke();
備注:
addColorStop(offse,color);
中漸變的開始位置和結(jié)束位置介于0-1之間,0代表開始茧彤,1代表結(jié)束骡显。中間可以設置任何小數(shù)
? 徑向漸變
ctx.createradialGradient(x0,y0,r0,x1,y1,r1);
(x0,y0):漸變的開始圓的 x,y 坐標
r0:開始圓的半徑
(x1,y1):漸變的結(jié)束圓的 x,y 坐標
r1:結(jié)束圓的半徑
填充效果
ctx.fill(); 設置填充效果
ctx.fillstyle="值"; 設置填充顏色
非零環(huán)繞原則
? 繪制一個如下圖形
? 非零環(huán)繞原則:
1. 任意找一點,越簡單越好
2. 以點為圓心曾掂,繪制一條射線惫谤,越簡單越好(相交的邊越少越好)
3. 以射線為半徑順時針旋轉(zhuǎn),相交的邊同向記為+1珠洗,反方向記為-1溜歪,如果相加的區(qū)域等于0,則不填充许蓖。
4. 非零區(qū)域填充
? 非零環(huán)繞原則案例:
繪制虛線
原理:
設置虛線其實就是設置實線與空白部分直接的距離,利用數(shù)組描述其中的關系
例如: [10,10] 實線部分10px 空白部分10px
例如: [10,5] 實線部分10px 空白部分5px
例如: [10,5,20] 實線部分10px 空白5px 實線20px 空白部分10px 實線5px 空白20px....
繪制:
ctx.setLineDash(數(shù)組);
ctx.stroke();
例如:
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.setLineDash([2,4]);
ctx.stroke();
注意:
如果要將虛線改為實線蝴猪,只要將數(shù)組改為空數(shù)組即可。
繪制動畫效果
? 繪制一個描邊矩形: content.strokeRect(x,y,width,height)
? 繪制一個填充矩形: content.fillRect(x,y,width,height)
? 清除: content.clearRect(x,y,width,height)
? 實現(xiàn)動畫效果:
1. 先清屏
2. 繪制圖形
3. 處理變量
繪制文本
? 繪制填充文本
content.fillText(文本的內(nèi)容,x,y)
? 繪制鏤空文本
content.strokeText();
? 設置文字大谢着础:
content.font="20px 微軟雅黑"
備注: 該屬性設置文字大小拯腮,必須按照cssfont屬性的方式設置
? 文字水平對齊方式【文字在圓心點位置的對齊方式】
content.textalign="left | right | center"
?文字垂直對齊方式
content.textBaseline="top | middle | bottom | alphabetic(默認)"
?文字陰影效果
ctx.shadowColor="red"; 設置文字陰影的顏色
ctx.ShadowOffsetX=值; 設置文字陰影的水平偏移量
ctx.shadowOffsetY=值; 設置文字陰影的垂直偏移量
ctx.shadowBlur=值; 設置文字陰影的模糊度
繪制圖片
?
//將圖片繪制到畫布的指定位置
content.drawImage(圖片對象,x,y);
?
//將圖片繪制到指定區(qū)域大小的位置 x,y指的是矩形區(qū)域的位置,width和height指的是矩形區(qū)域的大小
content.drawImage(圖片對象,x,y,width,height);
?
//將圖片的指定區(qū)域繪制到指定矩形區(qū)域內(nèi)
content.drawImage(圖片對象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
sx,sy 指的是要從圖片哪塊區(qū)域開始繪制蚁飒,swidth动壤,sheight 是值 截取圖片區(qū)域的大小
dx,dy 是指矩形區(qū)域的位置,dwidth,dheight是值矩形區(qū)域的大小
?
解決圖片繪制到某一個區(qū)域的按原比例縮放繪制:
繪制寬:繪制高==原始寬:原始高
繪制圓弧
?
content.arc(x,y,radius,startradian,endradian[,direct]);
x,y 圓心的坐標
radius 半徑
startradian 開始弧度
endradian 結(jié)束弧度
direct 方向(默認順時針 false) true 代表逆時針
? 0度角在哪淮逻?
以圓心為中心向右為0角 順時針為正琼懊,逆時針為負
? 備注:
角度 和 弧度的關系: 角度:弧度= 180:pi
特殊值
0度 = 0弧度
30度 = π/6 (180度的六分之一)
45度 = π/4
60度 = π/3
90度 = π/2
180度 = π
360度 = 2π
? 繪制圓上任意點:
公式:
x=ox+r*cos( 弧度 )
y=oy+r*sin( 弧度 )
ox: 圓心的橫坐標
oy: 圓心的縱坐標
r: 圓的半徑
平移【坐標系圓點的平移】
ctx.translate(x,y);
特點:
通過該方法可以將原點的位置進行重新設置。
注意:
1. translate(x,y) 中不能設置一個值
2. 與moveTo(x,y) 的區(qū)別:
moveTo(x,y) 指的是將畫筆的落筆點的位置改變爬早,而坐標系中的原點位置并沒有發(fā)生改變
translate(x,y) 是將坐標系中的原點位置發(fā)生改變
旋轉(zhuǎn)【坐標系旋轉(zhuǎn)】
ctx.rotate(弧度)
伸縮
ctx.scale(x,y)
備注:
沿著x軸和y軸縮放
x,y 為倍數(shù) 例如: 0.5 1