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