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转数组