html5新標籤

2. 新的語義結構元素

以上標籤：

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

<meter> 標籤不應用於指示進度（在進度條中）。如果標記進度條，請使用 <progress> 標籤。

ie13+ 才支援這個標籤，對於不支援這個標籤的瀏覽器，就會顯示標籤裡面的內容。

6. progress標籤

用於表示任務進度

可以通過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元素。

注意：

1. canvas不支援ie9一下的瀏覽器

2. display: inline

3. canvas的預設寬高是 300*150

4. 寬高設定的問題：如果在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

• 繪製視訊

  繪製視訊其實就是一幀一幀的繪製圖片，通過定時器，幾秒鐘繪製一次

顏色樣式：

1. 顏色

   • 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: 定義描邊顏色

2. 透明度

   • globalAlpha: 定義容器內內容的不透明度。容器的不透明度不受影響

3. 線形設定

   • lineWidth: 線寬

   • lineCap: 線條兩端樣式。btt:預設值；round:圓形；square:方形。第一個值不會增加線條長度，後面兩個值會增加。

   • lineJoin: 兩條線交匯處的線條樣式。mitter:預設方型；round:圓形；bevel:菱形；

4. 漸變：

   • 建立漸變物件

     ​
     // 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;

   • 繪製想要應用漸變 的圖形

5. 陰影：

   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座標也會被放大一倍

疑問：

1. 如果想在一個canvas上畫多個圖形，他們的填充和描邊顏色都不一樣?

   下一個顏色不會影響上一個已經繪製的圖形的顏色：可以理解為畫完一個圖形後，換畫筆再畫另一個圖形，這並不影響上一個已經畫好的圖形

   cxt.fillStyle = 'green'
   cxt.fillRect(0, 0, 50, 50)
   cxt.fillStyle = 'blue'
   cxt.fillRect(50, 50, 50, 50)