2. 新的語義結構元素
| 標簽名 | display | 說明 |
|---|---|---|
| article | block | 定義文檔中的文章。沒有特殊樣式 |
| aside | block | 定義與所處內容之外的內容，但由於當前內容相關。常用於設置側邊菜單欄 |
| dialog | block | 默認情況下display:none，可以通過open屬性控制顯示與否。絕對定位 |
| figure | block | 定義文檔中的插圖等。有左右和上下外邊距 |
| figcaption | block | 定義<figure>的標題 |
| footer | block | 定義文檔或者節的頁腳 |
| header | block | 定義文檔或者節的頁眉 |
| main | block | 定義文檔的主要內容 |
| section | block | 定義文檔中的節 |
| mark | inline | 定義重要或者強調的內容。會呈現：rgb(255, 255, 0)的背景顏色 |
| nav | block | 定義文檔內的導航鏈接 |
| wbr | inline | 規定文檔的何處適合添加換行符。適合單詞太長不知道在哪里該斷行的情況。ie12+以上支持 |
| time | inline | 目前所有主流瀏覽器均不支持。給用戶代理看的，同時有助於搜索引擎生成更智能的搜索結果 |
以上標簽：
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 均支持
Internet Explorer 8 以及更早的版本不支持 <aside> 標簽。
如有特殊情況，會在說明里描述
3. datalist
配合input標簽使用，表示輸入框可能的值.datalist及其選項不會被顯示出來，他僅僅是合法值的輸入列表。請用input元素的list屬性綁定datalist
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
4. details
用於描述文檔或者文檔某個部分的細節，塊級元素。配合<summary>使用（display: list-item）。后者定義文檔描述，是可見的，點擊后者可以切換datails的是否可見。瀏覽器支持情況請看官網。
<!--通過open屬性定義details的是否可見-->
<details open="true">
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
5. meter
定義已知范圍或者分數值內的標量測量。也被稱為尺度。 display:inline-block
| 屬性 | 說明 |
|---|---|
| form | 規定<meter>所屬的一個或者多個表單 |
| low | 當value值低於最低值時，填充部分的顏色就會變成黃色 |
| high | 當value值高於最高值時，填充部分的顏色就會變成黃色 |
| max | 規定度量上限，如果沒有規定則默認為1。必須和min屬性一起使用。max必須大於min |
| min | 規定度量下限，如果沒有規定則默認為0。必須和max屬性一起使用 |
| optimum | 規定最佳值 |
<meter> 標簽不應用於指示進度（在進度條中）。如果標記進度條，請使用 <progress> 標簽。
ie13+ 才支持這個標簽，對於不支持這個標簽的瀏覽器，就會顯示標簽里面的內容。
6. progress標簽
用於表示任務進度
| 屬性 | 說明 |
|---|---|
| max | 最大值 |
| value | 當前任務進度 |
可以通過js控制進度條的進度
<progress id="progress" value="22" max="100"></progress>
<script>
let progress = document.getElementById('progress')
setInterval(() => {
progress.value += 1
}, 50)
</script>
ie10+瀏覽器才支持這個標簽
<progress> 標簽不適合用來表示度量衡（例如，磁盤空間使用情況或查詢結果）。如需表示度量衡，請使用 <meter> 標簽代替。
7. ruby
定義ruby注釋（中文注音）。配合 <rt> 標簽一同使用
<rp>:在不支持<ruby>的瀏覽器中使用
8. canvas
簡單介紹：canvas是一個可以用js在其中繪制圖形的html5元素。
注意：
-
canvas不支持ie9一下的瀏覽器
-
display: inline
-
canvas的默認寬高是 300*150
-
寬高設置的問題：如果在style中設置寬高，相當於將整個畫布（包括畫布中的內容）進行放大和縮小，並且可能會使畫布內容變得模糊；要單純的設置畫布的寬高請用屬性
width和height。或者在js中使用canvas.width和canvas.height
<canvas id="myCanvas" width="200" height="100"></canvas>
在js中獲取canvas對象，並創建context對象
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d")
getContext()接受一個參數
2d表明創建一個2d圖像模型，不能寫成2D.目前只有2d這一種參數類型
創建矩形
// 四個參數分別代表：起始x坐標、起始y坐標、矩形寬、矩形高
cxt.fillRect(0, 10, 140, 75);
繪制圓形
// cxt.arc(20, 20, 20, 0, Math.PI[, false]); // 平口向上的半圓
cxt.arc(20, 20, 20, 0, Math.PI, true); // 平口向下的半圓
五個參數分別代表: 圓心的x/y坐標、半徑、起始弧度，結束弧度，旋轉方向
旋轉方向：可選參數。起始弧度到結束弧度畫弧線，是順繪制還是逆時針繪制。默認順時針false;true時為逆時針。
起始/結束弧度：以圓心的軸，水平向左一個半徑長度為0°；Math.PI表示180°
繪制文本：
// 字體樣式設置順序：字體樣式（比如斜體字）、字體大小、粗細、famil
// 最簡形式： '50px Arial'。字體大小不能放在最后
cxt.font = 'Italic 50px bold Arial'
cxt.textAlign = 'left' // 對齊方式。這個對其方式是指起始坐標是對齊文字左邊、右邊還是中間
cxt.textBaseline = 'middle' // 文字垂直方向對其方式
// 三個參數： 文本內容、起始位置x坐標，起始位置y坐標, 最大寬度（選填，當寬度變小，文字不會換行，而是壓縮文字）
ctxf.fillStyle = "pink" // 定義填充文本的顏色，對描邊文本不起作用
cxt.fillText('Hello World!', 0, 10 [,maxWidth]) // 定義填充文本
cxt.strokeText('Hello World!', 0, 10 [,maxWidth]) // 定義描邊文本
繪制文本的能力比較弱：不能換行之類的。不建議通過這個對文本做太多樣式設置
繪制線條：
cxt1.beginPath()
cxt1.moveTo(20, 10);
// 定義線條結束坐標或者轉折點
cxt1.lineTo(150, 40);
cxt1.lineTo(10, 50);
// cxt1.closePath() 有這一行代碼，上面的兩條線會閉合形成一個三角形；下面的一條線會從起始位置開始繪制。如下面右邊的截圖
cxt1.lineTo(190, 60);
// 結束線條的繪制
cxt1.stroke();
繪制圖形和視頻
var img = new Image()
img.src = '../images/297888.jpg' // 設置圖片路徑
//圖片加載完后，將其顯示在canvas中
img.onload = function () {
// ctx.drawImage(this, 0, 0)
// 第一個參數是要插入的圖片；第二個和第三個參數分別是圖片要插入的起始x\y坐標。這三個參數是必填的
ctx.drawImage(this, 10, 7) // 此時圖片就會以其默認的大小被繪制到容器中
// 地四個和第五個參數分別是圖片的寬、高。寬高比例和原圖不一樣會導致圖片變形
// ctx.drawImage(this, 10, 7, 200, 100) //改變圖片大小到1080*980
}
-
制作圖像切片 還沒搞明白
// 插入的圖片、原圖x/y坐標、原圖寬/高、切片x/y坐標、切片寬/高
ctx.drawImage(img, 10, 7, 100, 500, 0, 0, 200, 100) //改變圖片大小到1080*980 -
繪制視頻
繪制視頻其實就是一幀一幀的繪制圖片，通過定時器，幾秒鍾繪制一次
顏色樣式：
-
顏色
-
fillStyle: 既可以是css顏色值，也可以賦值一個漸變對象。下面的案例中是給一個矩形添加漸變色填充
var grd=cxt.createRadialGradient(75,50,5,90,60,100); // 繪制徑向漸變
// 規定什么位置什么顏色
grd.addColorStop(0, "#FF0000");
// grd.addColorStop(0.5,"#00FF00");
grd.addColorStop(0.5, "pink");
grd.addColorStop(1, "#0000FF");
cxt.fillStyle = grd;
cxt.fillRect(0, 0, 175, 50); -
strokeStyle: 定義描邊顏色
-
-
透明度
-
globalAlpha: 定義容器內內容的不透明度。容器的不透明度不受影響
-
-
線形設置
-
lineWidth: 線寬
-
lineCap: 線條兩端樣式。btt:默認值；round:圓形；square:方形。第一個值不會增加線條長度，后面兩個值會增加。
-
lineJoin: 兩條線交匯處的線條樣式。mitter:默認方型；round:圓形；bevel:菱形；
-
-
漸變：
-
創建漸變對象
// var grd=cxt.createRadialGradient(75,50,5,90,60,100); // 繪制徑向漸變
// 四個參數分別是：
var grd = cxt4.createLinearGradient(0, 0, 175, 50); // 線性漸變 -
設置漸變點
grd.addColorStop(0, "#FF0000");
grd.addColorStop(0.5, "pink");
grd.addColorStop(1, "#0000FF"); -
將漸變樣式添加到容器上
xt4.fillStyle = grd; -
繪制想要應用漸變 的圖形
-
-
陰影：
cxt.shadowOffsetX = num //水平偏移
cxt.shadowOffsetY = num //垂直偏移
cxt.shadowBlur = num // 模糊度
cxt.shadowColor = 'color' // 陰影顏色
變換：平移、旋轉、縮放
-
平移: 簡單的講解了保存和清除畫布狀態
// 當使用canvas對象時，沒有代碼提示，可以在代碼開頭添加下面一行代碼
/** @type {HTMLCanvasElement} */
// canvas里面的距離不用帶單位，直接用數值就可以了
var myCanvas = document.getElementById('myCanvas')
var cw = 400
var ch = 400
myCanvas.width = cw
myCanvas.height = cw
var cxt = myCanvas.getContext('2d')
// 繪圖
cxt.fillStyle = 'pink'
cxt.fillRect(100, 100, 100, 100)
// 保變換之前的狀態 -- 除了坐標軸外.
// 除了狀態外，還有什么被保存了？
cxt.save()
cxt.translate(-50, -50) // 將容器的坐標軸整體向上、向左各移動了50個像素。之后繪制的所有圖形都會受影響
cxt.fillStyle = 'green' // 設置顏色不會影響之前已經繪制的圖形的顏色
cxt.fillRect(50, 50, 50, 50)
cxt.fillRect(250, 250, 50, 50)
// 清除畫布：畫布坐標狀態恢復到之前保存的狀態
// 四個參數：畫布平移之后的 起始x/y坐標，結束x/y坐標。
// 這個坐標范圍內（矩形）繪制的圖形都會被重繪，清除.包括一下幾種情況
// 1. 變換之前繪制的圖形
// 2. 變換之后繪制的圖形
// 3. 圖形的一部分包含在范圍內，包含在范圍內的部分被清楚，之外的部分不被清楚
// 4. 清除不會清楚后面設置的顏色
cxt.clearRect(0, 0, 250, 250)
cxt.fillRect(300, 300, 50, 50) -
旋轉：
cxt.rotate(20*Math.PI/180)
cxt.fillRect(0, 0, 50, 50)
cxt.fillRect(50, 50, 50, 50)
注意點： 旋轉是以坐標軸的（0，0）坐標為軸心，順時針旋轉
-
縮放
cxt.fillRect(0, 0, 50, 50)
cxt.fillRect(50, 50, 50, 50)
// 兩個參數： x軸放大或者縮小的倍數、y軸放大或者縮小的倍數
// 這個放大和縮小和前面兩個一樣，都是針對坐標軸的
// 不僅圖形的高會被放大一倍；它的起始y坐標也會被放大一倍
cxt.scale(1,2)
cxt.fillRect(100, 100, 50, 50)兩個參數： x軸放大或者縮小的倍數、y軸放大或者縮小的倍數
這個放大和縮小和前面兩個一樣，都是針對坐標軸的
不僅圖形的高會被放大一倍；它的起始y坐標也會被放大一倍
疑問：
-
如果想在一個canvas上畫多個圖形，他們的填充和描邊顏色都不一樣?
下一個顏色不會影響上一個已經繪制的圖形的顏色：可以理解為畫完一個圖形后，換畫筆再畫另一個圖形，這並不影響上一個已經畫好的圖形
cxt.fillStyle = 'green'
cxt.fillRect(0, 0, 50, 50)
cxt.fillStyle = 'blue'
cxt.fillRect(50, 50, 50, 50)