HTML五、canvas、SVG

##總結

- 從這兩天的課程裏，我學到html簡單的一個編年史，以及標籤語義化最最有益是便於SEO及對盲人設備友好。也知道的風靡一時的flash爲何會被html5戰勝。

- HTML5新增了不少功能和標籤，尤其突出的就是canvas和SVG，video的功能也很亮眼。說實在的能按着方法寫出東西，可是以爲仍是很生疏，計算座標之類的不能很快反應出來。

- 不過這兩天，學到不少實現需求的思惟和技巧，每晚完成做業以後也會本身寫寫，琢磨琢磨。

- 好比建立一個文件夾把可能常常複用的函數放在裏面

- 靈活的分析不一樣需求使用結合的方式來實現效果（泡泡用對象，對SVG驗證碼的字符串拼接等等）

- 須要養成習慣性觸類旁通的思惟，分析本質更好總結出解決的方法（好比通過分析經常使用的產生隨機數的方法，來總結出一個公式，即可以封裝一個隨機數函數任意使用）

- 若是以上技巧使用得當，可大大提高代碼效率

***

##html編年史

- HTML4 （最先）

- XML (規範嚴格)

- XHTML 1.0 （沿用XML的規範）1.1（下降規範，過渡版本）

- HTML5

- WHATWG (組織，制定HTML5，最後轉回W3C)

##標籤

- 語義化

    - 利於SEO

    - 對盲人設備友好

## flash（Adobe）

- 被html5戰勝 （喬布斯）

##新增

- video

    - controls 特殊屬性，顯示控制按鈕

- redio

## canvas

- 畫布 canvas標籤

- 畫筆：pen=getContext（「2d」）

- 示例

    

    - 矩形

        - pen.fillstyle=「red」；

        - pen.fillRext（）// x，y，高，寬

        - pen.strokeStyle="blue"

        - pen.strokeRect()//

        - arc（50，110，50，0，2* Math.PI）

    - 方法

        - .fill 填充

        - stroke 路徑

        - beginPath 從新開始路徑

        - colsePath

    - 繪圖

    `   let img=new Image（）；

        img.src="image/1.jpg";

        let cs=document.getbyid("cs")

        let ctx=cs.getContext("2d");

        img.onload=function(){

        ctx.rotate(Math.PI/180 * 10); 旋轉10度

        ctx.drawImage(img,0,0,200,200);

        }`

        - 默認狀況下，旋轉是圍繞左上角00點旋轉的

        - 注意，圖片加載是異步，或其餘on

        - ctx. translate（100，100） 改變畫布的原點 （自轉）

        - 還原方法 （不影響後面的元素）

            - ctx.save(); 保存當前狀態

            - resotore（）;回到原來的狀態

            - scle

            - 擦除拖影

                - clearRect（0，0，800，600）； 後面參數整個畫布 （矩形）

***

#SVG

##圖片分類

- 矢量圖：經過算法計算，矢量圖方法縮小不會失真，沒法作到很是逼真的色彩。 應用場景：設計，建築圖。

- 位圖：顏色豐富逼真，可是會失真。應用場景：遊戲、其餘...

##拖拽

    拖拽

over裏用e.preventDefalut(); 阻止默認行爲

ondrop才能出現

***

##本地存儲

- cookie HTML5 之前 翻譯/點心

    - 保存服務器發給瀏覽器的信息

    - 精準推送

    - 問題

        - 大小有限制，不能超過過4KB 4000英文，2000中文

        - 安全問題

- localStorage 永久

- sessionStorage 一次會話 （打開一個瀏覽器，關閉）

    - 訪問方法同樣，本地存儲服務器，區別在於存儲時間

    - 存進去的數據會被轉成字符串

    - 注意：存以前轉成字符串

        - 方法：JSON.stringify（[11，23，47，20]）//數組轉JSON

        - 方法：JSON.parse();  //JSON轉數組