HTML5新特性

時間 2019-11-22

標籤 html5 html 特性欄目 HTML5 简体版

原文原文鏈接

HTML5新特性之一——與表單相關
1、新增的input的type及相關屬性php

1.已經學過的input type
text、password、radio、checkbox、file、button、submit、reset、image、hiddenhtml

2.新的input type
提示：下述驗證都必須放在一個表單元素中，表單提交時纔會觸發。消息彈出在一個小窗口中，
不是HTML元素，樣式沒法定製。
(1)email：提供了郵箱格式的驗證，形如：\w{1}@\w{1}
(2)url：提供了URL格式的驗證，形如：[a-zA-Z]{1}:
(3)number：提供了數字格式的驗證，形如：數字，提供了三個新的屬性可用： max(最大) min(最小) step(步長)
(4)tel：在手機中彈出數字鍵盤，而不是字母鍵盤
(5)search：可能顯示一個X用於清空已有輸入
(6)range：範圍選擇、滑塊選擇，提供了三個新的屬性可用： max(最大) min(最小) step(步長) value(初始值)
(7)color：顏色選擇
(8)date：日期選擇，彈出一個窗口，FF沒有實現
(9)month：月份選擇
(10)week：周選擇前端

使用input 新的type range 改變背景顏色：面試

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#target{
width:400px;
height:400px;
}
</style>
</head>
<body>
<h3>練習：使用type="range"</h3>正則表達式

<div id="target"></div><br>
紅色：<input type="range" id="red" max="255" value="0">
<span>0</span><br>
綠色：<input type="range" id="green" max="255" value="0">
<span>0</span><br>
藍色：<input type="range" id="blue" max="255" value="0">
<span>0</span><br>數據庫

function changeTargetBG(){
var r = red.value;
var g = green.value;
var b = blue.value;
target.style.background = 'rgb('+r+','+g+','+b+')';
}
</script>
</body>
2、新增的表單元素
3.已經學過的表單元素
提示：用戶能夠輸入/操做的
input textarea select/option button瀏覽器

4.新的表單元素
提示：下述四個新元素僅用於提示，用戶沒法操做，也沒法隨着表單輸入進行提交。
(1)datalist：數據列表，自己不可見，用於爲其餘輸入框提供輸入建議/提示：
<datalist id="menu">
<option>京醬肉絲</option>
<option>魚香肉絲</option>
<option>青椒肉絲</option>
</datalist>
個人午飯：<input type="text" list="menu">緩存

(2)progress：進度條
<progress></progress>
<progress value="10" min="0" max="100"></progress>
練習：使用定時器修改progress的進度值，100%時清除定時器服務器

使用定時器模仿進度條的變化：

<body>
<h1>新的表單元素</h1>
<form action="5.php">
加載中：<progress></progress><br>
下載中：<progress min="0" max="100" value="0" id="p2"></progress><br>
</form>

(3)meter：刻度尺
<meter min="0" max="100" low="能接受的最低值" high="能接受的最高值"
optimum="最優值" value="當前值">
</meter>

(4)output：輸出值，語義標籤，樣式效果與span無異。
商品單價：￥3.5 購買數量：2 小計：￥7.0

3、新增的表單元素的屬性

5.已經學過的表單元素的屬性
<input id="" class="" title="" style="" name="" value="" type=""
checked selected disabled>

6.表單元素的新屬性
(1)autocomplete：on/off，是否啓用輸入記錄功能，下次實現自動完成效果
(2)autofocus：是否自動得到焦點，HTML中只要出現此屬性就會自動申請輸入焦點，
提示：只有第一個聲明此屬性的輸入域才能得到焦點。（後面再聲明瞭無效）

(3)placeholder：佔位符，用於在輸入框中顯示提示性文本。注意：佔位符與value沒有任何關係。
(4)multiple：是否容許存在多個輸入，使用逗號分隔
(5)form：用於把輸入域放到表單外部，指定當前輸入域所屬的表單
<form action="" id="f1"></form>
<input form="f1">

與表單輸入驗證相關的新屬性
(6)required：必填輸入域
(7)maxlength：容許的最大字符長度，限制多餘的輸入
(8)minlength：容許的最小字符長度——並不是H5標準屬性，不能代替required屬性
(9)max：容許的數字的最大值
(10)min：容許的數字的最小值
(11)step：容許的數字的步長，基於min開始的
(12)pattern：指定必須知足的正則表達式

HTML5新特性之二——視頻和音頻
HTML5以前播放聲音有兩種方式：
(1)<body bgsound="x.mp3">
(2)<embed src="x.swf"></embed>

HTML5以後，播放視頻和音頻使用：
<video></video> 行內塊元素
<audio></audio> 行內塊元素

VIDEO標籤經常使用的屬性：
src：指定視頻源URL
width：指定播放區域的寬
height：指定播放區域的高
controls：是否顯示播放控件，默認爲false
autoplay：是否自動播放，默認爲false
loop：是否循環播放，默認爲false
poster：在播放以前顯示一張海報(播放以後沒法再顯示)，注意取消自動播放
preload：如何預加載視頻，有三個可選項：
auto：自動預加載視頻元數據，並緩存必定的時長
metadata：僅預加載視頻的元數據，不緩存視頻內容
none：不預加載視頻元數據，不緩存視頻內容
paused：JS中使用的只讀屬性，當前是否處於暫停狀態

VIDEO對象的經常使用事件：
onpause：當剛一暫停時觸發此事件
onplay：當剛一開始播放時觸發此事件
onplaying：當視頻播放進行中觸發此事件

VIDEO對象的方法：
play()：播放視頻
pause()：暫停視頻

<body>
<h1>視頻播放</h1>
<div class="container">
<video id="v3" src="resource/birds.mp4"></video>
<img src="img/haibao.jpg" class="ad">
<img src="img/play.png" class="bt">
</div>
<script>
v3.onpause = function(){ //視頻暫停
var img = document.querySelector('.container .ad');
img.style.display = 'block';
}
v3.onplay = function(){ //視頻開始播放
var img = document.querySelector('.container .ad');
img.style.display = 'none';
}

var bt = document.querySelector('.bt');
bt.onclick = function(){
if(v3.paused){
v3.play(); //播放視頻
this.src="img/pause.png";
}else {
v3.pause();
this.src="img/play.png";
}
}

//鼠標移入/移出事件不能綁定在video上：video和.bt是兄弟關係
var div = document.querySelector('.container');
div.onmouseover = function(){
bt.style.display = 'block';
}
div.onmouseout = function(){
bt.style.display = 'none';
}
</script>
</body>

AUDIO標籤經常使用屬性：
(1)src：指定視頻源URL
(2)width：指定播放區域的寬
(3)height：指定播放區域的高
(4)controls：是否顯示播放控件，默認爲false
(5)autoplay：是否自動播放，默認爲false
(6)loop：是否循環播放，默認爲false
(7)preload：如何預加載視頻，有三個可選項：
auto：自動預加載視頻元數據，並緩存必定的時長
metadata：僅預加載視頻的元數據，不緩存視頻內容
none：不預加載視頻元數據，不緩存視頻內容
(8)paused：JS中使用的只讀屬性，當前是否處於暫停狀態

AUDIO標籤的經常使用事件和方法與VIDEO標籤一致。

<audio src="resource/bg.mp3" controls>
您的瀏覽器不支持AUDIO標籤！
</audio>

HTML5新特性之三——canvas

1.補充背景知識：
Chrome中：一個窗口能夠有6個線程(工人)向服務器發起請求，能夠同時工做；
往瀏覽器顯示區域中繪製內容只有1個線程(工人)。
Canvas繪圖應用中，若是須要繪製多個圖片，通常必須等待全部圖片加載完成
才能開始繪製。圖片的加載完成順序沒法預測，必須等待。

給一個全局變量，圖像加載完成後就將本身的權重加在這個全局變量上，每一次都判斷
全局變量是否滿值，直到滿值以後纔開始繪製圖像（例子也是網易雲音樂播放器）

2.如何爲Canvas上的圖像/圖形綁定事件監聽
只有HTML元素(Canvas)才能進行事件綁定。圖形圖像沒法綁定事件監聽。

例子：網易雲音樂播放器

<body>
<canvas id="c2" width="400" height="500"></canvas>
<script>
var ctx = c2.getContext('2d');
var progress = 0; //100表所有加載完成

function draw(){
console.log('開始繪圖...');
//繪製背景圖
ctx.drawImage(imgBg, 0, 0);

//繪製圓形黑膠片
ctx.beginPath();
ctx.arc(200,250,120,0,2*Math.PI);
ctx.fill();

//繪製膠片封皮圖片
ctx.drawImage(imgDisc,200-imgDisc.width/2,250-imgDisc.height/2);

//繪製播放按鈕
ctx.drawImage(imgPlay,200-imgPlay.width/2, 500-imgPlay.height);
//爲播放按鈕綁定事件監聽
c2.onmousemove = function(e){ //這裏爲canvas綁定的事件
var x = e.offsetX;
var y = e.offsetY;
if(x>=150 && x<=250 && y>=400 && y<=500){
c2.style.cursor = 'pointer';
}else {
c2.style.cursor = 'default';
}
}
}
</script>
</body>

驗證碼的例子：/*******驗證碼*******/

<body>
<canvas id="c1" width="120" height="40"></canvas>
<a href="#" id="change">看不清，換一張</a>
<script>
/**Random Number**/
function rn(min,max){
return Math.floor( Math.random()*(max-min)+min );
}
/**Random Color**/
function rc(min,max){
var r = rn(min,max);
var g = rn(min,max);
var b = rn(min,max);
return `rgb(${r},${g},${b})`;
}
draw();
change.onclick = function(e){
e.preventDefault();
draw();
}

/**繪製驗證碼圖片**/
function draw(){
var ctx = c1.getContext('2d');
ctx.textBaseline = 'bottom';

/**繪製背景色**/
ctx.fillStyle = rc(180,240);
ctx.fillRect(0,0,c1.width,c1.height);
/**繪製文字**/
var str = 'ABCEFGHJKLMNPQRSTWXY3456789';
for(var i=0; i<5; i++){
var txt = str[rn(0,str.length)];
ctx.fillStyle = rc(50,160);
ctx.font = rn(15,40)+'px SimHei';
var x = 15+i*20;
var y = rn(25,45);
var deg = rn(-45, 45);
//修改座標原點和旋轉角度
ctx.translate(x,y);
ctx.rotate(deg*Math.PI/180);
ctx.fillText(txt, 0,0);
//恢復座標原點和旋轉角度
ctx.rotate(-deg*Math.PI/180);
ctx.translate(-x,-y);
}
/**繪製干擾線**/
for(var i=0; i<8; i++){
ctx.strokeStyle = rc(40,180);
ctx.beginPath();
ctx.moveTo( rn(0,c1.width), rn(0,c1.height) );
ctx.lineTo( rn(0,c1.width), rn(0,c1.height) );
ctx.stroke();
}
/**繪製干擾點**/
for(var i=0; i<100; i++){
ctx.fillStyle = rc(0,255);
ctx.beginPath();
ctx.arc(rn(0,c1.width),rn(0,c1.height), 1, 0, 2*Math.PI);
ctx.fill();
}
}
</script>
</body>
結論：很是不方便！

1.Canvas：畫布
2.Context：繪圖上下文/畫筆
3.ctx.strokeStyle = 顏色/漸變色
4.ctx.fillStyle = 顏色/漸變色
5.繪製矩形——定位點在左上角
ctx.fillRect(x,y, w, h)
ctx.strokeRect(x,y,w,h)
ctx.clearRect(x,y,w,h)

6.繪製文本——定位點基線的最左側
ctx.textBaseline = 'alphabetic/top/bottom/middle'
ctx.font = '30px SimHei'
ctx.measureText(txt).width
ctx.fillText(txt, x, y)
ctx.strokeText(txt, x, y)
7.
繪製路徑
ctx.beginPath()
ctx.moveTo(x,y)
ctx.lineTo(x,y)
ctx.closePath()
————————
ctx.stroke()
ctx.fill()
ctx.clip()

8.
繪製圓形路徑——圓形定位點在圓心——角度默認從3點鐘開始爲0度
ctx.beginPath()
ctx.arc(cx,cy, r, sAngle, eAngle, [isCounterClock: false]) //繪製圓拱路徑
ctx.stroke()/fill()/clip()
角度轉換爲弧度制的公式： deg*Math.PI/180

/*******使用canvas繪製統計圖*******/

<body>
<h1>做業：使用Canvas繪圖統計圖</h1>
<canvas id="c1">
您的瀏覽器不支持Canvas！
</canvas>

c1.width = 500;
c1.height = 400;
//Canvas的寬和高必須用屬性，不能用樣式
var ctx = c1.getContext('2d');
ctx.font = '14px SimHei';
ctx.textBaseline= 'bottom';
/***繪製X軸***/
ctx.beginPath();
ctx.moveTo(50,350); //左下角原點
ctx.lineTo(450,350); //右下角
ctx.lineTo(440,340); //箭頭
ctx.moveTo(450,350); //右下角
ctx.lineTo(440,360); //箭頭

/***繪製Y軸***/
ctx.moveTo(50,350); //左下角原點
ctx.lineTo(50,50); //左上角
ctx.lineTo(60,60); //箭頭
ctx.moveTo(50,50); //左上角
ctx.lineTo(40,60); //箭頭
//畫縱軸上的小刻度
for(var i=1; i<10; i++){ //Y軸上的座標點
var x = 50;
var y = 350-i*30;
ctx.moveTo(x,y); //座標點左側點
ctx.lineTo(x+5, y); //座標點右側點
//添加刻度上的字
var w = ctx.measureText(i).width;
ctx.fillText(i, x-w-2, y+7);
}

ctx.stroke();

/***繪製柱狀圖***/
var barWidth = 400/(2*arr.length+1); //柱的寬度和間距
for(var i=0; i<arr.length; i++){
var value = arr[i].value;
var label = arr[i].label;
var w = barWidth;
var h = 30*value;
var x = 50+(2*i+1)*barWidth;
var y = 350-h;
ctx.fillStyle='#000';
ctx.fillText(value,x,y);
ctx.strokeRect(x,y, w, h);//描邊一個矩形
var g = ctx.createLinearGradient(x,y,x,350);//設置漸變對象
g.addColorStop(0, rc());
g.addColorStop(1, '#fff');
ctx.fillStyle = g; //將填充顏色賦值給fillStyle
ctx.fillRect(x,y, w,h);//填充矩形

}

function rc(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return 'rgb('+r+','+g+','+b+')';
}
</script>

</body>

繪製圓形進度條的例子：
<body>
<h1>繪製圓形路徑</h1>
<canvas id="c3" width="500" height="400">
您的瀏覽器不支持Canvas！
</canvas>

//灰色的圓底
ctx.beginPath();
ctx.arc(250,200, 100, 0, 2*Math.PI);
ctx.lineWidth = 20;
ctx.strokeStyle = '#ddd';
ctx.stroke();
//綠色的進度條
var sAngle = -90; //開始角
var eAngle = -90; //結束角
ctx.strokeStyle = '#0a0';
var timer = setInterval(function(){ //定時器
ctx.beginPath();
ctx.arc(250,200,100,
sAngle*Math.PI/180,eAngle*Math.PI/180);
ctx.stroke();
var txt=parseInt((eAngle-sAngle)/360*100);
ctx.clearRect(230,180,50,50);
ctx.font='20px SimHei';
ctx.fillText(txt+'%',250,200);

eAngle+=15;
if(eAngle>270){
clearInterval(timer);
}
}, 100);
</script>
</body>

食人魚動畫效果代碼：

<body>
<h1>繪製圓形路徑</h1>
<canvas id="c3" width="500" height="400">
您的瀏覽器不支持Canvas！
</canvas>

function openMouth(){
//繪製外圍圓圈
ctx.beginPath();
ctx.arc(250,200, 100,
45*Math.PI/180,315*Math.PI/180);
ctx.lineTo(250,200);
ctx.closePath(); //閉合路徑，補全剩餘
ctx.stroke();

//繪製眼睛
ctx.beginPath();
ctx.arc(250,150,25,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle = '#6af';
ctx.fill();

//繪製眼神光
ctx.beginPath();
ctx.arc(260,135,5,0,2*Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
}
function closeMouth(){
//繪製外圍圓圈
ctx.beginPath();
ctx.arc(250,200, 100,0,2*Math.PI);
ctx.lineTo(250,200);
ctx.stroke();

//繪製眼睛
ctx.beginPath();
ctx.arc(250,150,25,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle = '#6af';
ctx.fill();

//繪製眼神光
ctx.beginPath();
ctx.arc(260,135,5,0,2*Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
}
var isOpen = true;
var timer = setInterval(function(){
ctx.clearRect(0,0,500,400);
if(isOpen){
closeMouth();
isOpen = false;
}else {
openMouth();
isOpen = true;
}
},300);
</script>
</body>

9.繪圖圖像——圖像的定位點在左上角
var img = new Image();
img.src = 'x.png';
img.onload = function(){ //必須等待圖片加載完成
//img.width img.height
ctx.drawImage( img, x, y );
ctx.drawImage( img, x, y, w, h ); //繪製圖像進行拉伸
}

來回彈的小飛機：

var img = new Image();
img.src = "img/p1.png";
img.onload = function(){
var x = 0;
var xDirection = 1; //1或-1
var y = 0;
setInterval(function(){
//清除已有的內容
ctx.clearRect(0,0, 500, 400);

ctx.drawImage(img, x, y);

x += 10*xDirection;

if(x>=500-100){ //控制X軸行進方向
xDirection = -1;
}else if(x<=0){
xDirection = 1;
}
},100);
}
</script>

例子：讓小飛機隨鼠標移動：面向過程版

面向對象版：

<body>
<h1>隨鼠標移動的飛機——面向對象版</h1>
<canvas id="c7" width="400" height="600">
您的瀏覽器不支持Canvas！
</canvas>

hero.draw();
},50);
}
}

//加載圖片
var imgHero = new Image();
imgHero.src = 'img/p1.png';
imgHero.onload = function(){
//加載完成：建立英雄、啓動引擎
hero = new Hero(imgHero);
engine = new Engine();
engine.start();

//開始使用鼠標操控英雄
c7.onmousemove = function(e){
hero.x = e.offsetX-imgHero.width/2;
hero.y = e.offsetY-imgHero.height/2;
}
}
</script>
</body>

總結：Canvas繪圖
繪製矩形
ctx.fillRect(x,y,w,h)
ctx.strokeRect(x,y,w,h)
ctx.clearRect(x,y,w,h)
繪製文本
ctx.fillText(txt,x,y)
ctx.strokeText(txt,x,y)
ctx.measureText(txt).width
繪製路徑
ctx.beginPath()
ctx.moveTo(x,y) ctx.lineTo(x,y)
ctx.arc(cx,cy, r, sAngle, eAngle)
ctx.closePath()
----------------------------
ctx.fill() / ctx.stroke() / ctx.clip()
繪製圖像
ctx.drawImage(img, x, y)
ctx.drawImage(img, x, y, w, h)

3.補充小難點：如何旋轉繪製圖像
Canvas（畫布）是不能旋轉的。
Context（畫筆）是能夠旋轉的。
ctx.rotate( deg * Math.PI / 180 )
//在原有旋轉角度基礎上繼續旋轉deg度

——旋轉的軸心是畫布的座標原點(默認爲左上角)
ctx.translate( x, y ) //把畫布的座標原點平移到新的點，
記得修改圖形/圖像的定位點

例子：小飛機原地打轉

var img = new Image();
img.src = 'img/p1.png';
img.onload = function(){

ctx.translate(250,200); //原點平移
//ctx.drawImage(img,-img.width/2,-img.height/2);

setInterval(function(){
//清除已有內容
ctx.clearRect(-250,-200,500,400);

ctx.rotate(10*Math.PI/180);
//注意修改圖形圖像的定位點
ctx.drawImage(img,-img.width/2, -img.height/2);
},200)
}
</script>

4.經常使用的第三方繪製統計圖表的工具
直接使用Canvas繪製統計圖表比較麻煩，推薦使用第三方繪圖工具庫。
免費的：
Chart.js
FreeChart
收費的：
FusionChart
提示：第三方工具的使用不須要記憶，隨查隨用便可。

3.使用Canvas繪製矩形——矩形的定位點左上角
ctx.strokeStyle = 顏色/漸變對象;
ctx.fillStyle = 顏色/漸變對象;
ctx.strokeRect(x, y, w, h) 描邊一個矩形區域
ctx.fillRect(x, y, w, h) 填充一個矩形區域
ctx.clearRect(x,y,w,h) 清除一個矩形區域內全部內容

var g = ctx.createLinearGradient(x1,y1,x2,y2);
g.addColorStop(偏移量, 顏色);

例子：
<body>
<h1>使用漸變色繪製矩形</h1>
<canvas id="c10" width="500" height="400">
您的瀏覽器不支持Canvas！
</canvas>
<script>
var ctx = c10.getContext('2d');

//建立線性漸變色
var x1 = 250-100;
var y1 = 200-75;
var x2 = x1+200;
var y2 = y1;
var g = ctx.createLinearGradient(x1,y1,x2,y2);
g.addColorStop(0,'#f00');
g.addColorStop(0.5,'#ff0');
g.addColorStop(1,'#0f0');

//200x150的矩形，畫布的正中央
//ctx.fillStyle = g;
//ctx.fillRect(250-100,200-75,200,150);
ctx.strokeStyle = g;
ctx.strokeRect(250-100,200-75,200,150);
</script>

4.使用Canvas繪製文本——文本的定位點在文本基線左側

middle 第二三根中央
top：第一根線
bottom：第四根線
ctx.textBaseline = 'alphabetic/middle/bottom/top' 文本基線
ctx.font = '20px SimHei'; 設置大小和字體
ctx.measureText(txt).width 測量一段文本的總寬度
ctx.fillText(txt, x, y) 填充文本
ctx.strokeText(txt, x, y) 描邊文本

參考PS中的「鋼筆工具」：路徑自己不可見！建立完路徑有三種用途： (1)描邊 (2)填充(必須閉合) (3)裁剪圖片
ctx.beginPath() //開始一條新路徑
/******繪製路徑********/
ctx.moveTo(x, y) 移動到指定點
ctx.lineTo(x,y) 從上一個點到指定點畫一條直線
ctx.arc(cx,cy, r, sAngle, eAngle) 繪製一條圓拱形路徑
ctx.ellipse(cx,cy, rx, ry, sAngle, eAngle) 繪製一條橢圓拱形路徑
ctx.bezierCurveTo(.....) 繪製貝塞爾曲線
/***********************/
ctx.closePath() //閉合當前路徑
ctx.stroke() //使用當前路徑進行描邊
ctx.fill() //使用當前路徑進行填充
ctx.clip() //使用當前路徑進行裁切

HTML5新特性之三——SVG

前端領域可使用繪圖技術：
WebGL
Canvas —— HTML5標準中新特性
SVG —— HTML5標準中新特性

3.SVG繪圖
Scalable Vector Graphic，可縮放的矢量圖
位圖：使用像素點描述圖像，善於描述顏色細節變化，放大以後會出現馬賽克問題。PS、Canvas
矢量圖：使用線條、色塊描述圖像，不善於描述顏色細節變化，能夠無限縮放而不失真。AI、SVG

SVG
矢量圖，不依賴分辨率
每一個圖形都是一個標籤，支持事件監聽
最適合帶有大型渲染區域的應用程序（例如百度地圖）
不適合遊戲
Canvas
位圖，依賴分辨率
每一個圖形不是標籤，不支持事件綁定
可以以「.png」或「.jpg」格式保存結果圖像
最合適圖像密集型的遊戲

SVG在2002年就是W3C標準，遠早於HTML5標準。歸入HTML5標準，SVG技術進行了一些刪減
，如動畫、特效。

HTML5以前如何使用SVG圖形：
先建立一個.svg文件(是一個XML文檔)
再建立一個.html文件，其中使用IMG、IFRAME、EMBED、OBJECT標籤引用.svg文件。
HTML5以後如何使用SVG圖形：
SVG相關標籤都已經歸入H5標籤庫，能夠直接在.html中使用。

4.使用SVG繪製矩形
<svg>
<rect x="200" y="160" width="100"
height="80" fill="rgba(0,0,255,.3)" stroke="#00f" id="r5"
opacity="1" stroke-width="6"></rect>

r5.onmouseover = function(){
console.log('mouse over...');
//r5.fill = 'rgba(0,255,0,.8)';
//console.log(r5);
//debugger;
r5.setAttribute('fill','rgba(0,0,255,.5)');
}
r5.onmouseout = function(){
console.log('mouse out...');
r5.setAttribute('fill','rgba(0,0,255,.3)');
}
</svg>
使用SVG圖形圖像須要注意：
普通CSS樣式對svg圖形大多無效，須要本身專用樣式，或者聲明爲屬性
SVG圖形的屬性都不是HTML屬性，即不能使用 rect.fill = "#f00"來修改該元素的屬性——
SVG標籤根本上屬於XML標籤，而不是HTML標籤！可使用核心DOM操做方法來控制SVG標籤的屬性
： setAttribute() .getAttribute()

例子1：
<script>
setInterval(function(){
//r5.x += 5;
var x = r5.getAttribute('x');
console.log(typeof x); //string
x = parseInt(x);
x += 10;
r5.setAttribute('x', x);

var o = r5.getAttribute('opacity');
o = parseFloat(o);
o -= 0.05;
r5.setAttribute('opacity',o)
},200);
</script>

例子2：
<h1>繪製矩形</h1>
<svg width="500" height="400">
<rect x="100" y="55" width="300" height="60" fill="red" opacity="1"></rect>
<rect x="100" y="170" width="300" height="60" fill="yellow" opacity="1"></rect>
<rect x="100" y="285" width="300" height="60" fill="green" opacity="1"></rect>
</svg>

<script>
var list = document.querySelectorAll('rect');
for(var i in list){
var r = list[i];
r.onclick = function(){
var me = this;
var t = setInterval(function(){
var w = me.getAttribute('width');
var h = me.getAttribute('height');
var o = me.getAttribute('opacity');
w = parseFloat(w);
h = parseFloat(h);
o = parseFloat(o);

w += 10;
h += 2;
o -= 0.05;

me.setAttribute('width',w);
me.setAttribute('height',h);
me.setAttribute('opacity',o);

if(o<=0){
clearInterval(t);
//DOM樹上刪除元素
me.parentNode.removeChild(me);
}
}, 100)
}
}
</script>

document.createElement()建立都是標準的HTML標籤，不能用於建立SVG元素！
document.createElementNS('http://www.w3.org/2000/svg', 'SVG標籤名')，
使用此方法建立的標籤才能被SVG解釋器解析。
例子：
<body>
<h1>使用JS動態繪製矩形</h1>
<svg id="svg8" width="500" height="400">
</svg>

<script>
svg8.onclick = function(e){
console.log('開始建立新元素');
var x = e.offsetX;
var y = e.offsetY;

//動態的建立一個矩形
var r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
r.setAttribute('x', x);
r.setAttribute('y', y);
r.setAttribute('width', 50);
r.setAttribute('height', 50);
r.setAttribute('fill', rc());

//追加到SVG父元素
svg8.appendChild(r);
}

function rc(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return `rgb(${r},${g},${b})`;
}
</script>

<h1>使用JS動態繪製矩形</h1>
<svg id="svg10" width="500" height="400"></svg>

<script>
svg10.onclick = function(e){
var x = e.offsetX;
var y = e.offsetY;

//建立新的SVG元素
var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
c.setAttribute('cx', x);
c.setAttribute('cy', y);
c.setAttribute('r', 20);
c.setAttribute('fill', rc());
c.setAttribute('opacity', 1);

svg10.appendChild(c);

//啓動定時器，變大變淡
var t = setInterval(function(){
var r = c.getAttribute('r');
r = parseFloat(r);
r += 5;
c.setAttribute('r', r);

var o = c.getAttribute('opacity');
o = parseFloat(o);
o -= 0.05;
c.setAttribute('opacity', o);

if(o<=0){
clearInterval(t);
c.parentNode.removeChild(c);
}
},100)
}

function rc(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return `rgb(${r},${g},${b})`;
}
</script>

注意：offsetX offsetY 指的是鼠標相對被點擊元素的左上角
pageX pageY 指的是相對文檔顯示區
screenX screenY 指的是相對於整個屏幕

5.使用SVG繪製圓形
<circle cx="" cy="" r="" fill="" stroke=""></circle>

<circle cx="50" cy="50" r="50"></circle>
6.使用SVG繪製橢圓
<ellipse cx="" cy="" rx="80" ry="40" ....></ellipse>
<ellipse cx="250" cy="200" rx="200" ry="100"
fill="transparent" stroke="#aaa"></ellipse>

7.使用SVG繪製直線
<line x1="" y1="" x2="" y2=""></line>

分組的概念：能夠把多個SVG元素相同的屬性放在一個公共的父元素中
——稱爲「元素組」: <g fill="" stroke=""></g>；組員會自動繼承小組的屬性設置。

</g>
</svg>

8.使用SVG繪製折線
<polyline points="x1,y1 x2,y2 x3,y3 .... " ></polyline>
一個點的X和Y用逗號分隔；兩個點之間用空格分隔
<polyline points="250,50 50,200 250,350 450,200 250,50" stroke="#a33"
stroke-width="30" fill="transparent"></polyline>

9. 使用SVG繪製多邊形
<polygon points="x1,y1 x2,y2 x3,y3 .... "></polygon>
注意：多邊形與折線的區別：多邊形會自動閉合起始點，折線不會。
<polygon points="250,50 50,200 250,350 450,200" stroke="#3f3"
stroke-width="10" fill="transparent"></polygon>

10.使用SVG繪製文本
<text x="" y="" font-size="" font-family="">文本內容</text>
提示：SVG中的文字是能夠選中的——標籤的innerHTML，Canvas中的fillText()
作不到這一點。SVG中的文字內容夠容易搜索引擎查詢到，排名會靠前。

11.使用SVG繪製圖像
<image xlink:href="img/disc.png" x="250" y="200" width="200"
height="200"></image>
注意：SVG圖形中一旦使用位圖，就不能無限縮放了。

12.對SVG圖形/圖像使用定義特效 —— 瞭解
定義和使用特效：

(1)漸變色特效：線性漸變、徑向漸變
<defs>
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red"></stop>
<stop offset="50%" stop-color="yellow"></stop>
<stop offset="100%" stop-color="green"></stop>
</linearGradient>
</defs>
<rect x="50" y="150" width="400" height="100" fill="url(#g1)"></rect>

(2)濾鏡特效：模糊濾鏡-高斯模糊
<svg id="s13" width="500" height="400">
<defs>
<filter id="mh">
<feGaussianBlur stdDeviation="3"></feGaussianBlur>
</filter>
</defs>

例子：

HTML新特性之——拖放API

1.拖放API

源對象能夠觸發的事件(3個)：
src.ondragstart：剛開始被拖動
src.ondrag：被拖動中
src.ondragend：拖動結束
目標對象能夠觸發的事件(4個)：
target.ondragenter：源對象被拖動着進入目標對象
target.ondragover：源對象被拖動在目標對象上方
target.ondragleave：源對象被拖動着離開目標對象
target.ondrop：源對象在目標對象上方釋放
提示：dragover事件的默認後續行爲就是觸發dragleave，即便用戶鬆手也觸發該事件。
必須阻止其默認行爲，纔可能觸發drop事件！

拖放源對象和目標對象間如何傳遞數據：
(1)使用全局變量——污染全局對象
src.ondragstart：爲全局變量賦值
target.ondrop：讀取全局變量的值

var list = document.querySelectorAll('.src');
for(var i in list){
var img = list[i];
//源對象能夠觸發的事件
img.ondragstart = function(){
console.log('src: drag start...');
srcObj = this;//記錄拖拽的源對象
}
}

//目標對象能夠觸發的事件
target.ondragover = function(e){
e.preventDefault(); //使得drop能夠觸發
}
target.ondrop = function(){
console.log('target: drop...');
this.innerHTML = '';
var copy = srcObj.cloneNode(); //克隆一個元素
this.appendChild( copy );
srcObj.style.display = 'none';
srcObj.nextElementSibling.style.display = 'inline-block';
}
</script>

(2)拖放事件的新屬性 event.dataTransfer（數據傳遞對象——拖拉機）
src.ondragstart：
e.dataTransfer.setData(k, v)
target.ondrop：
e.dataTransfer.getData(k)
注意：此方法只能傳遞string數據。
HTML5標準中：k只能是三種可能之一：text/uri-list、text/html、Files
但不一樣的瀏覽器有不一樣的擴展。

var list = document.querySelectorAll('.src');
for(var i in list){
var img = list[i];
//源對象能夠觸發的事件
img.ondragstart = function(e){
console.log('src: drag start...');
//保存被拖動的源對象的id
e.dataTransfer.setData('text/html',this.id);
}
}

//目標對象能夠觸發的事件
target.ondragover = function(e){
e.preventDefault(); //使得drop能夠觸發
console.log('target: drag over...');
}
target.ondrop = function(e){
console.log('target: drop...');
var id = e.dataTransfer.getData('text/html');
var img = document.getElementById(id);
console.log(img);
target.innerHTML = '';
target.appendChild(img.cloneNode());
}
</script>

2.擴展知識點：如何在網頁中拖放顯示一張客戶端的圖片——瞭解
(1)必須阻止拖放本地圖片到瀏覽器，默認在新窗口中打開的行爲
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
(3)爲目標div元素綁定ondrop事件
target.ondrop = function(e){
//經過e.dataTransfer對象獲取源對象拖動時傳遞的數據
var f0 = e.dataTransfer.files[0]; //File：文件對象
var fr = new FileReader(); //文件讀取器對象
fr.readAsDataURL(f0); //讀取文件內容
fr.onload = function(){ //讀取完成事件
console.log('客戶端文件讀取完成');
var img = new Image();
img.src = fr.result;
target.appendChild(img);
}
}
<script>
//容許觸發ondrop事件
document.ondragover = function(e){
e.preventDefault();
}
//阻止document.ondrop事件的默認行爲——新窗口中打開圖片
document.ondrop = function(e){
e.preventDefault();
}
target.ondragover = function(e){
e.preventDefault();
}
target.ondrop = function(e){
console.log('圖片在div上方釋放了');
var f0 = e.dataTransfer.files[0];//File
var fr = new FileReader(); //文件讀取器對象
fr.readAsDataURL(f0);
fr.onload = function(){
var img = new Image();
img.src = fr.result;
target.appendChild(img);
}
}
</script>

HTML新特性之——文件操做相關對象

HTML5新增長的幾個文件操做相關對象：
File：表示一個文件
FileList：表示一個文件集合
FileReader：文件讀取對象，用於讀取文件中的內容
FileWriter：文件寫出對象，用於向文件中寫出內容

2.Web Worker：

（1）操做系統：用於管理磁盤和內存，分配CPU時間片，實現程序的併發執行
（宏觀上是「同時執行」，微觀上是「一個一個執行」）。
（2）進程Process：可執行文件被操做系統從硬盤中調入到內存，得到執行，
稱爲進程/任務；進程是操做系統分配內存的基本單位。

（3）線程Thread：線程負責執行代碼語句，線程是進程內部的執行代碼的基本單位

（4）面試題1：進程和線程的關係？
進程是分配內存的基本單位；線程是執行代碼的基本單位。線程必須處於某個進
程中，一個進程內能夠同時存在1到多個線程。
（5）面試題2：Chrome中的線程模型是怎麼的？
每一個Chrome窗口都是一個進程，最多可使用6個線程發起HTTP請求並接收響應消息。
但解析HTML、執行JS、CSS、繪圖操做、事件監聽由惟一的UI主線程執行。
（6）js文件最好放在body的最後

（7）如何執行很耗時的JS任務
方式一：（1）在頁面中建立
<script src=''耗時.js"></script>
推薦放在body的最後——UI主線程只有一個！！！！！！
方式2：HTML5 中，能夠建立一個新的線程，來執行耗時的JS任務
new Worker（‘耗時.js’）；
由主UI線程建立一個新的「工做線程」，爲其分配耗時的JS任務，
UI主線程能夠繼續渲染界面
（8）可使用Worker線程加載任意的JS文件嗎？？

界面渲染任務只能由UI主線程執行，因此任何Worker線程都不能操做DOM樹，
即window/document/dom 對象不能再Worker執行的JS中使用。
UI主線程給Worker線程傳遞數據：
var w1= new Worker('耗時.js');
w1.postMessage(‘字符串消息’); //傳遞消息
Worker接收消息：(在JS中寫的)
onmessage=function(event){
//event.data //主線程發過來的消息event.data 裏存的就是
主線程UI發送過來的消息，能夠進行處理
}
Worker線程給UI主線程傳遞消息數據：
Worker 線程發送消息：
postMessage（「字符串消息」）；（也是在JS中寫的）
UI主線程接收消息：
// var w1=new Worker ('耗時.js');
w1. onmessage=function(event){
//event.data //對方發過來的數據
}

HTML新特性之——存儲

3.Web Storage

服務器端存儲：
服務器端文件、內存、數據庫。能夠存儲新聞、留言、
商品、訂單、評論、進入庫記錄、。。。

客戶端存儲：
應用：瀏覽器歷史記錄、內容定製、樣式定製、多久以內再也不登陸...
客戶端存儲的實現方法：

（1）Cookie ：服務器保存在客戶端的鍵值對瀏覽器兼容性最好，最長可保存
只能保存4kb數據（400多個漢字）
（2）Flash：依賴於Flash播放器
（3）HTML5 sessionStorage/localStorage 會話存儲/本地存儲
HTML5 Wbe Storage 存儲：HTML新特性，最長不能超過8MB
（4）IndexedDB ：保存在客戶端的「索引數據庫」

HTML5 Web Storage 分爲兩個對象：
（1）window.sessionStorage：會話級存儲
鍵值對形式的字符串，存儲在瀏覽器進程的內存空間中，一個頁面中保存的
數據能夠供後續的全部頁面使用；一旦瀏覽器窗口關閉、操做系統
重啓，sessionStorage中的數據都會消失，其餘瀏覽器進程不能訪問
當前瀏覽器進程中的sessionStorage數據

總結：sessionStorage的用途：在某個瀏覽器窗口前後打開的多個頁面間共享數據。

（2）window.localStorage:本地存儲，跨會話級存儲
鍵值對形式的字符串，存儲在本地的文件系統（磁盤的文件）中，
這些數據在瀏覽器關閉後，甚至操做系統重啓後，仍然可使用。沒有過時時間，
是永久存儲

localStorage：
把數據保存在磁盤文件中，能夠永久存儲
localStorage.setItem(k,v)
localStorage.getItem(k)
localStorage.removeItem(k)
localStorage.clear()
localStorage.length
localStorage.key(index)

例子：單詞錄入系統

如何監視localStorage中存儲的數據發生了改變：
window.onstorage=function(){
//localStorage對象中存儲的數據發生改變了
}

如改變頁面風格後，下一頁面能夠及時更着改變

//監視localStorage中數據的修改
window.onstorage=function(){
var s=localStorage.getItem('風格');
document.body.style.background=s;
}

HTML新特性之——WebSocket
4.WebSocket

HTTP協議：基於「請求-響應模型」的協議，沒有請求，就沒有響應；一個請求，
只會對應一個響應。用於呈現網頁，沒有問題；可是有些應用中，顯得力不從心：
實時應用、聊天室....
「心跳請求」——使用「定時器+XHR」——解決效果並很差。

WebSocket協議：基於「廣播模型」的協議，只要客戶端鏈接到服務器，就一直保持鏈接
/永久鏈接，一方不須要發消息，對方能夠主動的給出消息；一方發一個消息，對方能夠
給出多個應答消息。

瀏覽器做爲客戶端使用WebSocket協議進行通訊步驟：
var ws = new WebSocket('ws://127.0.0.1:9999'); //建立鏈接
ws.onopen = function(){ //鏈接成功
ws.onmessage = function(e){ //接收消息
//e.data
}
ws.send(); //發送消息
}

注意：WebSocket服務器端編寫比較麻煩！可使用PHP、Java、C#、NodeJS等編寫。

總結：HTML5 WebSocket用於建立使用WS協議的客戶端應用，鏈接WS協議的服務器端應用。

1.Two.js
是一個第三方二維繪圖函數庫，能夠在WebGL、Canvas、SVG上繪製圖形，
從而屏蔽三者在使用上的不一樣。

2.地理定位

HTML5新特性：geolocation，用於返回當前瀏覽器所在的地理座標。

window.navigator.geolocation { getCurrentPosition(succCB, errCB) 得到當前瀏覽器所在定位數據 watchPosition() 使用定時器不停的得到定位數據 clearWatch() 清除監視定時器}