瀏覽器內(nèi)核（渲染引擎）
- IE瀏覽器內(nèi)核：Trident內(nèi)核，也是俗稱的IE內(nèi)核；
- Chrome瀏覽器內(nèi)核：統(tǒng)稱為Chromium內(nèi)核或Chrome內(nèi)核，以前是Webkit內(nèi)核，現(xiàn)在是Blink內(nèi)核；
- Firefox瀏覽器內(nèi)核：Gecko內(nèi)核，俗稱Firefox內(nèi)核；
- Safari瀏覽器內(nèi)核：Webkit內(nèi)核；
- Opera瀏覽器內(nèi)核：最初是自己的Presto內(nèi)核，后來是Webkit，現(xiàn)在是Blink內(nèi)核；
- 360瀏覽器、獵豹瀏覽器內(nèi)核：IE+Chrome雙內(nèi)核；
- 搜狗、遨游、QQ瀏覽器內(nèi)核：Trident（兼容模式）+Webkit（高速模式）；
- 百度瀏覽器、世界之窗內(nèi)核：IE內(nèi)核；
- 2345瀏覽器內(nèi)核：以前是IE內(nèi)核，現(xiàn)在也是IE+Chrome雙內(nèi)核；
- 關(guān)于移動(dòng)端：
- 移動(dòng)端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
目前移動(dòng)設(shè)備瀏覽器上常用的內(nèi)核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等蘋果 iOS 平臺(tái)主要是 WebKit，Android 4.4 之前的 Android 系統(tǒng)瀏覽器內(nèi)核是 WebKit，Android4.4 系統(tǒng)瀏覽器切換到了Chromium，內(nèi)核是 Webkit 的分支 Blink，Windows Phone 8 系統(tǒng)瀏覽器內(nèi)核是 Trident。
了解HTML5
HTML5屬于上一代HTML的新迭代語言，設(shè)計(jì)HTML5最主要的目的是為了在移動(dòng)設(shè)備上支持多媒體！?。? 例如： video 標(biāo)簽和 audio 及 canvas 標(biāo)記
◆ 新特性：
1. 取消了過時(shí)的顯示效果標(biāo)記 <font></font> 和 <center></center> ...
2. 新表單元素引入
3. 新語義標(biāo)簽的引入
4. canvas標(biāo)簽（圖形設(shè)計(jì)）
5. 本地?cái)?shù)據(jù)庫（本地存儲(chǔ)）
6. 一些API
◆ 好處：
1. 跨平臺(tái)
例如：比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)性非常強(qiáng)大，這也是大多數(shù)人對(duì)HTML5有興趣的主要原因。
◆ 缺點(diǎn)：
1. pc端瀏覽器支持不是特別友好，造成用戶體驗(yàn)不佳
新語義標(biāo)簽
http://www.w3school.com.cn/html/html5_semantic_elements.asp
<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>
....
語義標(biāo)簽兼容性處理
解決方案一：通過創(chuàng)建元素的方式，然后將元素轉(zhuǎn)化為塊級(jí)元素即可
document.createElement("header");
解決方案二：通過引用第三方j(luò)s插件方式(本質(zhì)也是用createElement方式)
<!--[if lte IE 8]>
<script type="text/javascript" src="html5shiv.min.js"></script>
<![endif]-->
多媒體標(biāo)簽及屬性介紹
?<video></video> 視頻
屬性：controls 顯示控制欄
屬性：autoplay 自動(dòng)播放
屬性：loop 設(shè)置循環(huán)播放
?<audio></audio> 音頻
屬性：controls 顯示控制欄
屬性：autoplay 自動(dòng)播放
屬性：loop 設(shè)置循環(huán)播放
?video標(biāo)簽支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp
? 多媒體標(biāo)簽在網(wǎng)頁中的兼容效果方式
<video>
<source src="code/多媒體標(biāo)簽/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： 顯示時(shí)間
表單屬性
◆ form屬性：
autocomplete = on(默認(rèn)) | off 自動(dòng)完成
novalidate = true(默認(rèn)) | false 是否關(guān)閉校驗(yàn)
◆ input屬性：
autofocus： 自動(dòng)獲取焦點(diǎn)
placeholder： 占位符 （提示信息）
multiple： 實(shí)現(xiàn)多選效果
form：規(guī)定輸入字段所屬的一個(gè)或多個(gè)表單。
<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： 必填項(xiàng), oninvalid="setCustomValidity('必填內(nèi)容')"
<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("請(qǐng)輸入4到11為數(shù)字");
}else{
this.setCustomValidity("");
}
}
</script>
HTMl5中的API
獲取頁面元素及類名操作和自定義屬性
? document.querySelector("選擇器")；
備注：
選擇器： 可以是css中的任意一種選擇器
通過該選擇器只能選中第一個(gè)元素。
? document.querySelectorAll("選擇器");
備注： 與document.querySelector區(qū)別： querySelectorAll 可以選中所有符合選擇器規(guī)則的元素，返回的是一個(gè)列表。querySelector返回的只是單獨(dú)的一個(gè)元素
? Dom.classList.add("類名"): 給當(dāng)前dom元素添加類樣式
? Dom.classList.remove("類名"); 給當(dāng)前dom元素移除類樣式
? Dom.classList.contains("類名"); 檢測是否包含類樣式
? Dom.classList.toggle("active"); 切換類樣式（有就刪除，沒有就添加）
? 自定義屬性
data-自定義屬性名
備注：
在標(biāo)簽中，以data-自定義名稱
1. 獲取自定義屬性 Dom.dataset 返回的是一個(gè)對(duì)象
Dom.dataset.屬性名 或者 Dom.dataset[屬性名]
注意：屬性名是不包含data-
2. 設(shè)置自定義屬性
Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值；
文件讀取
? FileReader
FileReader接口有3個(gè)用來讀取文件方法返回結(jié)果在result中
readAsBinaryString ---將文件讀取為二進(jìn)制編碼
readAsText---將文件讀取為文本
readAsDataURL---將文件讀取為DataURL
? FileReader 提供的事件模型
onabort 中斷時(shí)觸發(fā)
onerror 出錯(cuò)時(shí)觸發(fā)
onload 文件讀取成功完成時(shí)觸發(fā)
onloadend讀取完成觸發(fā)，無論成功或失敗
onloadstart讀取開始時(shí)觸發(fā)
onprogress讀取中
<input type="file" name="">
<script type="text/javascript">
var input=document.querySelector("input");
input.onchange=function(){
//獲取到文件
var file=this.files[0];
//開始讀取，創(chuàng)建讀取器
var reader=new FileReader();
//開始讀取
reader.readAsText(file);
//獲取讀取的結(jié)果
//當(dāng)文件讀取完成后，才可以獲取文件信息內(nèi)容
reader.onload=function() {
console.log(reader.result);
}
}
</script>
獲取網(wǎng)絡(luò)狀態(tài)
? 獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)
window.navigator.onLine 返回一個(gè)布爾值
? 網(wǎng)絡(luò)狀態(tài)事件
1. window.ononline
2. window.onoffline
本地存儲(chǔ)
? 發(fā)展：
隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁的應(yīng)用越來越普遍，同時(shí)也變的越來越復(fù)雜，為了滿足各種各樣的需求，會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù)，傳統(tǒng)方式我們以document.cookie來進(jìn)行存儲(chǔ)的，但是由于其存儲(chǔ)大小只有4k左右，并且解析也相當(dāng)?shù)膹?fù)雜，給開發(fā)帶來諸多不便，HTML5規(guī)范則提出解決方案，使用sessionStorage和localStorage存儲(chǔ)數(shù)據(jù)。
? localStorage：
1. 永久生效
2. 多窗口共享
3. 容量大約為20M
◆ window.localStorage.setItem(key,value) 設(shè)置存儲(chǔ)內(nèi)容
◆ window.localStorage.getItem(key) 獲取內(nèi)容
◆ window.localStorage.removeItem(key) 刪除內(nèi)容
◆ window.localStorage.clear() 清空內(nèi)容
? sessionStorage：
1. 生命周期為關(guān)閉當(dāng)前瀏覽器窗口
2. 可以在同一個(gè)窗口下訪問
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
注意：
chrome已不再支持html中audio/video標(biāo)簽的autoplay屬性,據(jù)說是突然播放聲音怕到你，信？
◆ video 可配合muted(靜音)屬性可播放，或是video.play()；
◆ audio 就是不可以不可以不可以
設(shè)置方法：(網(wǎng)友給的，不過我就是找不到“Autoplay policy”，嗯...)
1、在chrome瀏覽器地址欄中輸入：chrome://flags
2、搜索“Autoplay policy”，默認(rèn)為“Default”，修改為 “No user gesture is required” 就可以了
Canvas畫布
繪圖工具
? 介紹canvas畫布
? 設(shè)置畫布大?。?使用屬性方式設(shè)置
? 解決畫布重繪問題
1. 設(shè)置一次描邊
2. 開啟新的圖層 ctx.beginPath();
繪圖方法
步驟：落筆(找落筆點(diǎn)坐標(biāo)) -- 連線 -- 描邊
ctx.moveTo(x,y) 落筆
ctx.lineTo(x,y) 連線
ctx.stroke() 描邊
ctx.beginPath()； 開啟新的圖層
顏色： strokeStyle="值"
線寬： lineWidth="值" 備注：不需要帶單位
線連接方式： lineJoin: round | bevel | miter (默認(rèn))
線帽（線兩端的結(jié)束方式/圓角）： lineCap: butt(默認(rèn)值) | round | square
閉合路徑： ctx.closePath()
漸變方案
? 線性漸變
var grd=ctx.createLinearGradient(x0,y0,x1,y1);
說明：
x0-->漸變開始的x坐標(biāo)
y0-->漸變開始的y坐標(biāo)
x1-->漸變結(jié)束的x坐標(biāo)
y1-->漸變結(jié)束的y坐標(biāo)
grd.addColorStop(0,"black"); 設(shè)置漸變的開始顏色
grd.addColorStop(0.1,"yellow"); 設(shè)置漸變的中間顏色
grd.addColorStop(1,"red"); 設(shè)置漸變的結(jié)束顏色
ctx.strokeStyle=grd;
ctx.stroke();
備注：
addColorStop(offse,color);
漸變的開始位置和結(jié)束位置介于0-1之間，0代表開始，1代表結(jié)束。中間可以設(shè)置任何小數(shù)
? 徑向漸變
ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);
說明：
(x0,y0)：漸變的開始圓的 x,y 坐標(biāo)
r0：開始圓的半徑
(x1,y1)：漸變的結(jié)束圓的 x,y 坐標(biāo)
r1：結(jié)束圓的半徑
填充效果
ctx.fill(); 設(shè)置填充效果
ctx.fillStyle="值"; 設(shè)置填充顏色
非零環(huán)繞原則
? 繪制一個(gè)如下圖形
? 非零環(huán)繞原則：
1. 任意找一點(diǎn)，越簡單越好
2. 以點(diǎn)為圓心，繪制一條射線，越簡單越好（相交的邊越少越好）
3. 以射線為半徑順時(shí)針旋轉(zhuǎn)，相交的邊同向記為+1，反方向記為-1，如果相加的區(qū)域等于0，則不填充。
4. 非零區(qū)域填充
繪制虛線
原理：設(shè)置虛線其實(shí)就是設(shè)置實(shí)線與空白部分直接的距離,利用數(shù)組描述其中的關(guān)系
例如： [10,10] 實(shí)線部分10px 空白部分10px
例如： [10,5] 實(shí)線部分10px 空白部分5px
例如： [10,5,20] 實(shí)線部分10px 空白5px 實(shí)線20px 空白部分10px 實(shí)線5px 空白20px
繪制：
ctx.setLineDash(數(shù)組);
ctx.stroke();
例如：
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.setLineDash([2,4]);
ctx.stroke();
注意：
如果要將虛線改為實(shí)線，只要將數(shù)組改為空數(shù)組即可。
繪制動(dòng)畫效果
? 繪制一個(gè)描邊矩形： ctx.strokeRect(x, y, width, height)
? 繪制一個(gè)填充矩形： ctx.fillRect(x, y, width, height)
? 清除： ctx.clearRect(x, y, width, height)
? 實(shí)現(xiàn)動(dòng)畫效果：
1. 先清屏
2. 繪制圖形
3. 處理變量
繪制文本
?繪制填充文本
ctx.fillText(文本的內(nèi)容,x,y)
?繪制鏤空文本
ctx.strokeText();
?設(shè)置文字大小：
ctx.font="20px 微軟雅黑"
備注： 該屬性設(shè)置文字大小，必須按照cssfont屬性的方式設(shè)置
?文字水平對(duì)齊方式【文字在圓心點(diǎn)位置的對(duì)齊方式】
ctx.textAlign="left | right | center"
?文字垂直對(duì)齊方式
ctx.textBaseline="top | middle | bottom | alphabetic(默認(rèn))"
?文字陰影效果
ctx.shadowColor="red"; 設(shè)置文字陰影的顏色
ctx.ShadowOffsetX=值; 設(shè)置文字陰影的水平偏移量
ctx.shadowOffsetY=值; 設(shè)置文字陰影的垂直偏移量
ctx.shadowBlur=值; 設(shè)置文字陰影的模糊度(值越大越模糊)
繪制圖片
? 將圖片繪制到畫布的指定位置(圖片加載完成再繪制)
ctx.drawImage(圖片對(duì)象,x,y);
? 將圖片繪制到指定區(qū)域大小的位置（x,y指的是矩形區(qū)域的開始坐標(biāo)，width和height指的是矩形區(qū)域的大?。? ctx.drawImage(圖片對(duì)象,x,y,width,height);
? 將圖片的指定區(qū)域繪制到指定矩形區(qū)域內(nèi)
ctx.drawImage(圖片對(duì)象, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);
sx,sy 指的是要從圖片哪塊區(qū)域開始繪制，swidth，sheight是指截取圖片區(qū)域的大小
dx,dy 是指繪制區(qū)域的位置，dwidth,dheight是指繪制區(qū)域的大小
? 解決圖片繪制到某一個(gè)區(qū)域的按原比例縮放繪制(失真效果):
讓繪制的寬高比等于原始圖片寬高比
繪制圓弧
? ctx.arc(x,y,radius,startradian,endradian[,direct]);
說明：
x, y 圓心的坐標(biāo)
radius 半徑
startradian 開始弧度（角度和弧度的關(guān)系： 角度:弧度= 180 : Math.PI）
endradian 結(jié)束弧度
direct 方向（默認(rèn)順時(shí)針false） true 代表逆時(shí)針
? 0度角在哪？
以圓心為中心向右為0角 順時(shí)針為正，逆時(shí)針為負(fù)
? 特殊值：
0度 = 0弧度
45度 = Math.PI / 4
60度 = Math.PI / 3
90度 = Math.PI / 2
180度 = Math.PI
360度 = 2 * Math.PI
? 繪制圓上任意點(diǎn):（注意：弧度，角度和弧度的關(guān)系： 角度:弧度= 180 : Math.PI）
公式：
x = ox + r * Math.cos(弧度)
y = oy + r * Math.sin(弧度)
ox: 圓心的橫坐標(biāo)
oy: 圓心的縱坐標(biāo)
r： 圓的半徑
平移【坐標(biāo)系圓點(diǎn)的平移】
ctx.translate(x,y);
特點(diǎn)：
通過該方法可以將畫布原點(diǎn)的位置進(jìn)行重新設(shè)置。
注意：
1. translate(x,y) 中不能設(shè)置一個(gè)值
2. 與moveTo(x,y) 的區(qū)別：
moveTo(x,y) 指的是將畫筆的落筆點(diǎn)的位置改變，而坐標(biāo)系中的原點(diǎn)位置并沒有發(fā)生改變
translate(x,y) 是將畫布坐標(biāo)系中的原點(diǎn)位置發(fā)生改變
旋轉(zhuǎn)【坐標(biāo)系旋轉(zhuǎn)】
ctx.rotate(弧度) （注意是弧度，角度和弧度的關(guān)系： 角度:弧度= 180 : Math.PI）
伸縮
ctx.scale(x,y)
備注：
沿著x軸和y軸縮放
x,y 為倍數(shù) 例如: 0.5 1
|
