2020/7/27 HTML5 CSS3复习

HTML5 :

1,gelolcation----定位

2,video audio

3,localStorage

   cookie :容量小到最多4k,浏览器服务器之间共享

   localStorage: 5M      浏览器独享

4,WebWorker 多进程

5,WebSQL,IndexedDB 数据库用到前台 存在安全隐患,被删除

6,文件操作 文件拖拽

7,canvas  画图

8,manifest 文件 前台控制缓存

**************************************************************

geolocation -定位

1,原理:

   pc端:通过IP地址定位  精度非常差

   移动: GPS    精度高

不像大多数属性,这个不挂在window上 而是挂在 navigator上

navigator.geolocation

 

这个对象只有3中方法

 

clearWatch  : 停止不断获取当前位置

watchPosition: 不断的获取位置 根据你的位置来不断改变,类似于实时导航

getCurrentPosition:只获取一次当前位置

只要将百度地图中的经纬度换成获取的IP地址的经纬度就行

将v改为1.2 老版本就不要输入密钥

 

 

chrome不可以获取到ip 因为Chrome找goole.com要 基本要不到,太慢了

ie可以 是找微软的ip库要  所以不受影响,

 

获取ip对应的经纬度:

 

 

**************************************************************

 

localStorage

   在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

 

限定数据是string类型 常见的JSON类型需要转换,本质是对字符串的读取

存储内容太多，导致页面卡顿

   浏览器本都存储(前台数据都是不安全的)

  

将localStroage里面存储的数据打印出来

 

自带的key()方法 来根据i来输出 localStorage对象里面的key

 

读取数据的3种方式:

 

删除数据的几种方式:

 

sessionStorage 也是5M 与localStorage很相似

localStorage 是永久性存储 sessionStorage是会话期间的存储,浏览器一关就没了

 

**************************************************************

文件拖拽

 

为什么要阻止drop dragover的默认事件?

   因为chrome ie fiieFox 会默认将拖动的文件打开,不可浏览文件就会触发下载,更不能忍受的是前2者会在当前页面打开,导致原页面被覆盖

 

文件拖拽待补充

 

**************************************************************

 

画图

   canvas 位图---放大一定程度都会失真 变成马赛克  HTML5标准

   SVG   矢量图—可以无限放大都不会失真            独立的存在

   VML   矢量图       IE的矢量图与SVG配合才能兼容所有浏览器

 

 

canvas

Canvas标签提供画布 apple公司开发，多用于游戏开发，画图，直接放图片服务器压力大

 

ie9以上以及主流浏览器支持，当不支持的时候，就会显示Canvas中的文本内容，类似img中的alt效果   且与img一样是行内块元素

 

px加不加无所谓

 

var ctx = canvas.getContext('2d'); //上下文，相当于画笔

 

fillRect画一个矩形

参数 ：相对画布左上角的位置 x,y,长，宽，默认背景颜色是黑色

 

可通过fillStyle来设置背景色  注意： 这个样式的设置一定要放在画这步的前面，否则样式不生效，因为画完了，就不会再加样式上去了（画之前添加样式）

 ctx.fillStyle = 'rgba(200,0,0,.5)';

 

这个是描边的矩形  fillRect是填充 填满

 

 

清除画布 清除任意位置大小的内容

 ctx.clearRect(45, 45, 60, 60); //位置也是相对画布来的，将中间掏空

 

                              通过路径来绘制图形

图形的基本元素就是路径，前面的画矩形，其实也是根据路径来的，先上面到右边再到下面，左边就能将矩形绘制出来

 

1，创建起始点

2，使用画图的命令画出路径

3，把路径闭合

4，通过描边或者填充绘制图形

 

绘制路径

beginPath() 表示开始绘制路径

moveTo() 设置起始点

lineTo() 来设置另外点的位置

fill来并填充  样式设置应该放在填充之前，否者无效

 

 

在stroke中 使得最后一个点回到初始点，线才会闭合，因为这个是线不是填充

 

除此之外还可以使用closePath() 来代替使得图形自动闭合,线条比较宽的时候用闭合就把不会有缺口

注意闭合不要写在stroke()前面跟fill一样 这个语句执行完 他就画了  后面加闭合 加样式无效了

 

画出来的图片可以保存生成png形式的图片

 

 

画⚪

 

x,y确定圆心，radius 半径 startAngle开始角度（默认3点钟方向）

endAngle 结束角度  

anticlockwise boolean值 表示顺时针还是逆时针，默认是false代表顺时针

 

startAngle就是开始方向  就是值为0的时候

 

 

画笑脸的时候，从begin开始 🖊就在画布上一直移动，圆之间会被线连接起来，所以用moveTo来移动🖊直接到下一个点 当然用多个begin也是可以但是不合理

 

 

线性渐变

 

 

getImageDate(x,y,宽，高)  获取画布画出来的图

 

 var img = ctx.getImageData(70, 70, 160, 160);

        ctx.putImageData(img, 300, 300);

 

putImageData()  放置获取的图

 

 

 

**************************************************************

css3

1,圆角 border-radius

2,阴影 text-shadow box-shadow

3,渐变  liner,radial

4 rgba

5,transform

6,动画 transition animation

 

**************************************************************

圆角补充:

 

border-radius: 10px/50px;

 

这种写法表示横向是10px  竖向是50px

 

 

text-shadow

text-shadow: 1px 1px 2px red; 第三个参数是模糊程度

box-shadow :inset 2px 2px 2px black 默认是外阴影 加inset是内阴影

利用inset实现按下去的效果

 

 

渐变:只能对background 或者background-image使用 本质是加背景图

linear-gradient(方向,color1,color2..)

 

表示从左上到右下 直接写颜色渐变终点的方向

-webkit- linear-gradient(方向,color1,color2..)

与原来用法不同  方向是写颜色开始的方向,结束方向是对立面

 

 

除了大致方向 线性渐变还可以加 渐变角度来准确控制渐变的方向 颜色还可以取百分比的形式

 

径向渐变 渐变中心默认是中间,第一个参数可设置径向渐变中心 第二个参数是渐变半径  更多内容再说, 不常用

 

 

transform :用tarnsform一定要加初始值

 

css3样式不改变盒模型  如transform :scale(2); 放大也不会挤掉其他元素,不改变元素的真实大小

 

DOM操作 是非常耗时,因为改变元素的位置,重排,重拍后再重新绘制到页面上,也就是重绘,所以导致耗时,所以css3样式 特别是translate不用重排和重绘,所以比较高效,特别是在移动端,性能尤其看重

 

 

 

动画:

1, transition  简单,方便,容易 只要和数字有关都可以渐变(颜色本质也是数字,所以也可以渐变)

   习惯用all 注意不用全部渐变的时候就单独的分开来写,如下背景色就不会渐变,点击就会直接变色

 

2,animation    强大,不方便

 易错点: 每个百分比都是一个状态,既然是一个状态,如50%的时候如果没加入width:400px 就会默认只有一个高度状态,从25%到50%就会高度变大,宽度自动回到200px  要想不缩回,就得将原来状态加上

 

易错点2: 比如50%高度变成400px不是指定25%-50%高度变成400px,而是从0%就开始变化,如果要避免这种状况,就得每个状态将所有属性设定好了,其他状态保持不变

   animate-fill-mode

backwards:返回初始状态

both: 第一次返回 第二次不返回 第三次。。。

animation-iteration-count 动画次数

infinite :无线循环

 

animation-direction: alternate

动画重复的时候,默认会从头开始 设置方向为alternate 

第二次就会从结束返回到开始

 

animation-play-state: paused; 暂停动画

 scale()  放大与收缩 scale(x,y)一个数表示整体放大缩小,俩个数是x,y方向放大的倍数

transform注意点:

1,执行顺序是从后往前

第一种是:先拉伸 再旋转

第二种是: 先旋转再拉伸

 

2, 3D效果转换

perspective() 透视  近大远小产生3D效果 值越小效果越明显

注意初始值要加rotateY(0deg)  不然动画会出现异动

 

当rotateX/Y/Z()角度为正的话就是顺时针

 

所以rotateX()  角度为正的时候就是感觉向里面

rotateY()  角度为正的时候就是感觉 向右边转(从下看就是顺时针)

rotateZ()  角度为正的时候就是在平面上顺时针转

这也解释了 为什么z-index越大 越往外面

 

transform-style: flat | preserve-3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。所以才能在竖直方向飘起来,不然就是2d好像被压住一样,子元素没法产生3d效果