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