HTML5 API笔记（总）下

day01

HTML5API
音频元素
画布
拖拽
本地数据库

一、音视频频
audio 音频标签
video 视频标签

属性：
src 播放的地址
width 视频元素的宽度
heigth 视频元素的高度
autoplay 自动播放 布尔属性
controls 控制条 布尔属性
loop 循环播放 布尔属性
muted 静音

如果要切换播放内容，使用元素的src属性

元素节点属性：
duration 总时长
curretnTime 当前播放的时间
volume 当前音量
paused 是否暂停
暂停状态返回true
播放状态返回false
ended 是否结束
playbackRate 播放速度

元素节点的方法：
play() 播放
paused() 暂停

day02
**—–
实现上下键控制音量，左右键控制进度。**

document.onleydown = function(event){
if(event.keyCode == 37){
//左，控制快退
video.currentTime -= 5;
}
if(event.keyCode == 38){
//上，增加音量
if(video.volume < 0.9){
video.volume += 0.1;
}else{
video.volume = 1;
}
}
if(event.keyCode == 39){
//右，控制快进
video.currentTime += 5;
}
if(event.keyCode == 40){
//下，减小音量
if(video.volume > 0.1){
video.volume -= 0.1;
}else{
video.volume = 0;
}
}
}

音视频事件：
play 开始播放
playing 正在播放
seeking 移动进度条的时候触发
可以在这里获取当前时间，显示在页面上
volumechange 音量发生改变

画布：
1.获取canvas元素
var canvas = document.getElementById(‘canvas’);
2.获取上下文对象
var context = canvas.getContext(‘2d’);
3.设置样式
context.fillStyle = ‘red’;//填充样式
context.strokeStyle = ‘blue’;//边框样式
4.设置线宽
context.lineWidth = 3;//边框绘制时使用
5.绘制
绘制矩形：

      context.fillRect(开始的坐标x,y,宽,高);//绘制填充矩形 

      context.strokeRect(开始的坐标x,y,宽,高);//绘制边框矩形 

      context.clearRect(开始的坐标x,y,宽,高);//清除画布中的矩形 

   *绘制圆形：*
           开始路径
             context.beginPath();
           设置路径
             context.arc(圆心坐标x,y,半径,开始弧度,结束弧度,是否逆时针绘制);
             弧度：Math.PI=180°
             最后一个参数为true则逆时针绘制。
           关闭路径
              context.closePath();
           绘制 
              context.fill();//填充绘制
              context.stroke();//边框绘制 

   *绘制直线：*
          开始路径
              context.beginPath();
          设置路径
              context.moveTo(起点坐标x,y);
              context.lineTo(结束点的坐标x,y);
              context.lineTo(结束点的坐标x,y);//绘制两条曲线，以上一条的结束点作为起始点
          关闭路径
              context.closePath();
              产生一个闭合的路径。
          绘制
              contex.stroke();
   *绘制曲线：*
          设置路径
            context.moveTo(0,0);
            context.bezierCureveTo(控制点1的x,y，控制点2的x,y,终点的x,y);
            context.quadraticCurveTo(控制点的x,y,终点的x,y);
   *绘制渐变：*
         创建渐变对象
             线性渐变：
                var gradient = context.createLinearGradient(开始点的x,y,结束点的x,y);
             径向渐变：  
                context.createRadialGradient(小圆的圆心x,y,半径,大圆的x,y,半径);
                绘制同心圆渐变，小圆和大圆的圆心要一样。
         添加渐变颜色     
            gradient.addColorStop(偏移量0-1，color);       
            gradient.addColorStop(偏移量0-1，color);
         设置填充渐变     
            context.fillStyle = gradient; 
            context.strokeStyle = gradient; 
   *绘制变形：*
          是对坐标轴进行的处理
        平移  
          context.translate(x轴的偏移量,y轴的偏移量);  
        扩大      
          context.scale(x轴放大的倍数,y轴放大的倍数);
           //参数大于1，放大；参数小于1，缩小。
        旋转    
          context.rotate(旋转角度);
              Math.PI=180°
          //默认顺时针旋转，负数逆时针旋转

day03

状态
save() 保存坐标轴、样式、阴影、线宽等状态
在下次操作坐标轴之前保存。
restore() 回到原来的状态—save状态
组合
设置新图形与旧图形的重叠方式和显示样式。
在两个图绘制之间使用，线绘制的是旧图形，后绘制的是新图形
context.globalCompositeOpeation = type;
type取值：
source-over
新图形在上【默认】
destitation-over
旧图形在上

   source-in   
         只显示新图形在旧图形中的重叠部分
   destination-in  
         只显示旧图形在新图形中的重叠部分

   source-out   
         只显示新图形的不重叠部分
   destination-out  
         只显示旧图形的不重叠部分

   source-atop  
         显示新图形的重叠部分和旧图形的不重叠部分
   destination-atop 
         显示旧图形的重叠部分和新图形的不重叠部分

   lighter  
      都显示，重叠部分加色处理
   xor      
      都显示，重叠部分透明
   copy     
      只显示新图形

阴影
shadowOffsetX = 4; x轴的阴影偏移量为4
shadowOffsetY = 4; y轴的阴影偏移量为4
如果都是>0，阴影在右下
如果都是<0，阴影在左上
shadowColor = ‘red’; 阴影颜色
shadowBlur = 5; 阴影的模糊范围：0-10之间

绘制图像：
创建图像
var img = new Image();
var img = dovument.createElement(‘image’);

图像加载完毕之后开始绘制：
  img.onload = function(){

      context,drawImage(img,开始绘制的坐标x,y);//原图绘制

      context,drawImage(img,开始绘制的坐标x,y,图像的宽,高);//缩放原图到指定宽高

      context,drawImage(img,局部区域的开始坐标x,y,图像截取的宽,高,目标位置的坐标x,y,图像绘制的宽,高);//实现局部的缩放，并绘制到指定位置

  }  

图像平铺
创建图片，设置图片路径
var img = new Image();
img.src = ‘url’; //图片路径
图像加载完毕后，开始创建平铺对象
img.onload = function(){
var pattern = context.createPattern(img,type);
}
type的取值：
no-repeate 不平铺
repeat-x x轴方向平铺
repeat-y y轴方向平铺
repeat 全方位铺满
使用：
context.fillStyle = pattern;
图像裁剪
1)绘制矩形路径
context.beginPath();
context.arc(200,150,80,0,Math.PI*2);
context.closePath();
2)裁剪
context.clip();
3)绘制图像
var image = new Image();
image.src = “../images/1.jpg”;
image.onload = function(){
context.drawImage(image,0,0,400,300); }

  在路径内的图像才能显示出来  

绘制文本
context.fillText(‘文本内容’,开始位置x,y,最大宽度);

context.strokeText(‘文本内容’,开始位置x,y,最大宽度);

//样式设置
context.font = ‘bold 16px 宋体’;

context.textAlign = ‘type’;//type = left/right/center

context.TextBaseline = ‘type’;//type = top/bottom/middle

输出位图
var url = ”;
canvas.toDataURL(‘image/png’);
img.src = url;

day04

拖放API

拖拽：
要拖放的元素 child
放置的位置 parent
在要拖放的元素上的事件：
dragstart 开始拖动
drag 开始移动
dragend 拖动结束
在要放置的位置元素上的事件：
dragenter 进入位置元素
dragover 在位置元素内移动
drop 放置事件
拖放事件生命周期：
dragstart–>drag–>dragenter–>dragover–>drop–>dragend

1.将拖放元素设置成可拖放的

2.写事件处理
child.ondragstart = function(event){
//获取数据传输对象
var dt = event.dataTransfer;
dt.setData(‘text/plain’,this.id);
}
parent.ondragover = function(event){
//将放置元素设置成可放置的
event.preventDefault();
}
parent.ondrop = function(event){
var dt = event.dataTransfer;
//获取id值
var id = dt.getData(‘text/plain’);
//获取节点
var node = document.getElementById(id);
//追加节点
this.appendChild(node);
//防止父元素也绑定了ondrop事件，从而引发的冒泡
event.stopPropagation();
//处理火狐浏览器新增的选项卡
event.preventDefault();
}

同一个元素在页面上只存在一次。
是拖拽，ondrop—->获取了元素，追加到位置元素。该节点跑到了位置元素，原来位置上的节点就没有了。

数据传输对象：
event.dataTransfer
setData(‘text/plain’,id);
getData(‘text/plain’);

dt.effectAllowed
设置视觉效果。
只能在dragstart中使用。
dt.setDragImage(img,100,100)
设置图片在光标左上100距离处

---

第4章 离线应用与客户端存储

本地缓存：
将需要的文件下载到本地缓存中，在断网的情况下依然可以访问到。
manifest文件，后缀名是.manifest。
内容：
CACHE MANIFEST
#version 1.0 //这是一个注释
CACHE:
要进行本地缓存的文件
NETWORK:
* 表示除了以上要缓存的，其他的都不缓存
使用：
将manifest文件引入到html文件中

网页缓存：
在联网的情况下，访问A页面–>B页面–>A页面（此时A页面是从缓存中获取的）
在断网的情况下，访问A页面–>B页面–>断网–>A页面（此时访问不到A页面）

applicationCache对象
检测服务器的manifest文件有没有修改，并做出一些处理。
事件：
checking
浏览器去检测manifest文件时触发的事件。浏览器在打开并访问html页面的时候触发一次
updateready
浏览器检测到manifest文件有变化，并将最新版本下载到本地缓存中的时候触发。
方法：
update() 让浏览器去检测
swapCache() 立即执行手动刷新

如何动态监听服务器版本更新并更新到页面上？

setInterval(function(){
applicationCache.update();
},2000);
//去检测
applicationCache.onchecking = function(){
console.log('浏览器检测manifest文件是否有更新');
}
//本地缓存中的内容已更新
applicationCache.onupdateready = function(){
//手动刷新
if(confirm('是否更新？')){
applicationCache.swapCache();
//刷新页面，加载最新的本地缓存中的内容
location.reload();
}
}

day05

客户端存储
Web Storage
sessionStorage
只限当前选项卡使用
localStorage
当前浏览器可以使用，跨选项卡的
方法：
setItem(name,value);
键值对，name–>value
getItem(name);
通过name来获取对应的value值

sqlList数据库
创建或者获取数据库：
var db = openDatabase(数据库名称,版本,描述,大小);
如何执行sql语句：
原形：
db.executeSql(sql,[],function(){},function(){});

  db.transaction(function(ts){
     //ts为事物对象
     ts.executeSql(sql语句,sql语句的参数列表,function(ts,result){
         //查询的结果
         reslut.rows;
     },function(ts,error){
         //错误信息
         error.message;
     });
  });

sql语句
创建表格
create table student{
id integer,
name text,
age integer
};
插入数据
insert into student values(?,?,?);
?是占位符，在参数列表处补充
在executeSql(sql,[1,’张三’,12],…);
查询数据
select * from student;
更新数据
update student set name = lisi where id = 3;
//将id为3的对应数据行中的name值设置为lisi
删除数据
delete from student;//删除所有的记录
delete from student where id = 1;//删除id为1的记录
删除表
drop table student;

indexedDB对象
var request = open(‘dbname’,’version’);
request.onsuccess
request.onerror
request.onupgradeneeded
版本更新的时候，创建数据库对象
获取数据库对象：request.result
…
对象仓库
put()
getAll()
delete(key)
clear();

第 6 章 Web Workers
…