html的新特性(如媒体文件,画布,拖放,本地数据库)的属性以及使用的详细步骤

本文主要是介绍html的新特性(如媒体文件,画布,拖放,本地数据库)的属性以及使用的详细步骤，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML5 API

1.媒体文件

		audiovideo

属性：

		src		文件的路径width		视频文件的宽度height		视频文件的高度autoplay		音视频自动播放（浏览器要设置允许自动播放）controls		控制条loop		音视频循环播放muted		音视频静音poster		视频加载不出来的时候显示的图片，也可以做封面

节点属性

		currentTime	当前的播放时间duration		视频的总时长paused			暂停，true 当前视频状态是停止的false 当前视频状态是播放的volume			当前视频的音量playbackRate	播放的速度playbackRate >1 加快播放速度playbackRate <1 减慢播放速度playbackRate =1 正常速度

节点方法

		play()  播放pause() 暂停

案例
通过键盘控制音量和进度

document.onkeydown=function(event){if(event.keyCode == 37){videos.currentTime -=2}else if(event.keyCode == 39){videos.currentTime +=2}else if(event.keyCode ==38){if(videos.volume<0.9){videos.volume +=0.1}else{videos.volume = 1}}else if(event.keyCode == 40){if(videos.volume>0){videos.volume -=0.1}else{videos.volume = 0}}}

2.画布
画布就是一个标签，没有绘图功能，有绘图功能的是图形上下文。
获取图形上下文
getContext()
绘制步骤

		获取canvas对象var canvas = document.getElementById('canvas')获取图形上下文var context = canvas.getContext('2d')设置绘图的样式context.fillStyle = 'red'	填充色context.strokeStyle = 'pink' 	边框色设置线宽context.lineWidth=5绘制图形context.fillRect()		填充矩形context.strokeRect()		边框矩形

矩形
fillRect(起点的x轴坐标，起点的y轴坐标，矩形的宽度，矩形的高度)
strokeRect(起点的x轴坐标，起点的y轴坐标，矩形的宽度，矩形的高度)
clearRect(起点的x轴坐标，起点的y轴坐标，矩形的宽度，矩形的高度)
圆形

		创建路径context.beginPath()设置路径context.arc(圆心的x轴，圆心的y轴，半径，开始的角度，结束的角度，顺时针false/逆时针true)Math.PI 180度关闭路径context.closePath()设置样式context.fillStyle = 'red'context.strokeStyle = 'pink'绘制圆形context.fill()实心圆context.stroke()空心圆

直线

		开始路径context.beginPath()直线的开始位置context.moveTo(起点的x轴坐标，起点的y坐标)直线的结束位置context.lineTo(终点的x轴坐标，终点的y坐标)结束路径context.closePath()设置样式绘制context.fill()context.stroke()

曲线

		开始路径context.benginPath()开始的位置context.moveTo(x,y)控制点两个控制点的：context.bezierCurveTo(第一个控制点的x轴位置,第一个控制点的y轴位置,第二个控制点的x轴位置,第二个控制点的y轴位置y,结束点x轴,结束点的y轴)如果想要上面的曲线更弯曲，就把x轴变大，y轴变小如果想要下面的曲线更弯曲，就把x轴变小，y轴变大一个控制点的：context.quadraticCurveTo(控制点的x轴,控制点的y轴,结束点的x轴,结束点的y轴)闭合context.closePath()绘制context.stroke()context.fill()默认颜色是黑色线宽是1

3.渐变
线性渐变：

			创建一个渐变的对象var gradient = context.createLinearGradient(起始点x坐标，起始点y坐标，结束点x坐标，结束点y坐标)添加渐变的颜色gradient.addColorStop(偏移量【0-1】,'color')设置填充渐变context.fillStyle = gradient使用渐变绘制矩形context.fillRect(0,0,400,400)

*4.变形
*
平移
context.translate(x,y)
缩放
context.scale(缩放的x轴倍数,缩放的y轴倍数)
旋转
context.rotate(旋转的角度)
注意点:
所有的变形,都针对坐标轴的,跟所绘制的图形没有关系
绘制图像
创建图像对象
var image = new Image()
添加图像的路径
image.src = ‘路径’
绘制图像
三个参数
context.drawImage(image,图片的起点x,图片的起点y)
五个参数
context.drawImage(image,图片的起点x,图片的起点y,图片的宽,图片的高)

注意:在我们绘制的图片的时候,要等图片加载完成再进行绘制image.onload=function(){绘制图像}

图片的裁剪

		设置裁剪的位置裁剪的形状裁剪: context.clip()注意: 裁剪必须在图像绘制之前进行文本的绘制context.font  设置字体样式context.textAlign 设置文本的对齐方式context.textBaseline 文本的基线context.fillText(文本的内容,x,y,最大宽度)

5.拖拽
拖放元素

			不是所有的元素都是可以被拖放的可以被拖放的:a,img其他都是不可以被拖放的元素draggable = 'true' 将不可拖放的元素设置为可以拖放的元素dragstart		开始拖放drag  			拖放gragend			拖放结束

目标元素

	用来放置拖放元素的设置目标元素可以放置拖放元素:dragenter        拖拽元素开始进入的时候dragover		 拖拽元素在内部移动的时候drop			 放置拖拽元素的时候

dragstart–>drag–>dragenter–>dragover–>drop–>dragend
拖拽

		在dragstart的时候,把当前拖拽元的id值存储到dataTransfer里面dataTransfer.setData('id',id值)drop获取存放在dataTransfer中的id值dataTransfer.getData('id')dragover阻止默认event.preventDefault()类数组对象转换成数组的方法Array.prototype.slice.call(array,0)Array.from(array)

兼容问题
谷歌底下:div不设置为可拖放元素,也可以被拖动
火狐底下:div必须转换为可拖放元素
6.本地数据库
在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以像访问本地文件那样轻松地对内置数据库进行访问。在HTML5中内置了两种本地数据库，一种为"SQLLite",可以通过SQL语言来访问的文件型SQL数据库。另外一种为"indexedDB"的NoSQL类型的数据库。到目前为止Chrome6+，Opera10+，Safari5+ 的浏览器对SQLLite数据库提供支持。
websql:关系型数据库
可以使用sql [mysql sql server oracle]
‘slect * from student where id=1001’
indexedDB: 非关系型
不可以使用sql
键值 键值对
key value
对象 {username:‘tom’,age:12}
1.SQLLite数据库 WebSQL数据库 谷歌支持，火狐目前不支持
关系型数据库,可以使用sql语言
SQL语句

			创建表：create table student(id integer,name text,age integer,tel text)删除表：drop table student插入数据：insert into student values(1001,'zhangsan',12,'12323233434')修改数据：update student set name='lisi' where id=1001查询数据：select name,age from student where id = 1001删除数据：delete from student
1) 访问方式1. 使用openDatabase方法创建一个访问数据库的对象参数:数据库名称,数据版本,数据库的介绍,数据库大小var db = openDatabase("mydb",1.0,'Test DB',2*1024*1024)1024个字节=1kb1024kb = 1Mb2M空间  2*1024*1024 操作数据库操作数据库中的表为了避免同时修改数据库中的表事务2. 使用事务处理db.transaction(function(ts){ts是事务对象executeSql执行sql语句,?是一个占位符var sql = 'update student set name=?,age=?'ts.executeSql(sql,[],function(ts,result){代表成功},function(ts,errorMsg){代表失败});});
2) APIwindow.openDatabase(dbName,version,desc,size,[fun])参数分别为数据库名，版本号，数据库的描述，数据库的大小(以字节为单位)，回调函数返回值为创建后的数据库访问对象，如果数据库不存在，则创建该数据库dataBase.transaction(fun)执行事务处理，使用事务处理，可以防止在对数据库进行访问以及执行有关操作时受到外界的干扰。参数为回调函数，在该回调函数中，执行访问数据库的语句transaction.executeSql(sql,[],dataHandler,errorHandler);sql 	需要执行的SQL语句[]sql中所有使用到的参数的数组，sql语句中可以使用占位符?进行替代dataHandller	成功执行SQL语句时调用的回调函数function dataHandler(transaction,results){//transaction 事务对象//results 执行查询操作时返回的查询到的结果数据集对象}errorHandler 	执行SQL语句出错时调用的回调函数function errorHandler(transaction,errmsg){//transaction 事务对象//errmsg 执行发生错误时的错误信息文字}

2. indexedDB
   该数据库是一种存储在客户端本地的NoSQL数据库，目前Firefox4+，IE10，Chrome11+对其提供了支持
   一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有唯一的名称。
   一个数据库可包含一个或多个对象存储。
   一个对象存储（由一个名称惟一标识,key值是唯一的）是一个记录集合。
   每个记录有一个键和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成唯一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符
   。
   在indexedDB-API中，对象仓库 中的每一条记录均为一个具有一个或多个属性值的对象,即 对象记录。

   key value
   1 {name:‘tom’,age:12}

   1. 使用步骤
      打开/链接数据库–>获取事务对象–>获取数据(对象)仓库–>增删改查

   1. 打开indexedDb连接并创建对象仓库
      /**

      • 1.获取数据库连接

      • */
        function getConnection (handler) {
        var request=window.indexedDB.open(“sms”,‘1.0’);

        request.οnerrοr=function(e){
        console.log(‘OPen Error!’,e);
        };
        request.onsuccess=function(e){
        db=e.target.result;
        // this.result
        var ts = db.transaction(‘Student’,‘readwrite’)
        // 通过事务对象获取对象仓库
        var store = ts.objectStore(“Student”);
        console.log(store)
        };
        /**

        • 2. 创建对象仓库
        • */
          在数据库版本更新的时候才会创建数据仓库,或者删除
          request.onupgradeneeded = function(e) {
          var oldVersion = e.oldVersion;
          var newVersion = e.newVersion;
          console.log(“数据库版本更新成功！旧版本为” + oldVersion + “,新版本为” + newVersion);
          //删除原有的数据仓库，创建新的数据仓库
          var db=e.target.result;
          if(db.objectStoreNames.contains(“Users”)){
          db.deleteObjectStore(“Users”);
          }
          //创建对象仓库,仓库名,仓库的配置对象
          var store = db.createObjectStore(“Users”,{
          keyPath:“userId”,主键,设置key值
          autoIncrement:true 自动增长
          });
          }
          }

   2. 执行增删改查操作
      在使用indexedDB数据库时，所有对于数据的操作都在一个事务内部执行。事务为以下两种：
      只读事务 “readonly”
      读写事务 “readwrite”
      /保存 * /
      function save() {
      getConnection(function(db){
      var user = {
      userName:“terry”,
      address:“shanxi”
      };
      //开启事务,事务对users对象仓库可读可写
      var tx = db.transaction([“Users”],“readwrite”);
      //获取对象仓库
      var store = tx.objectStore(“Users”);
      // put遇到同一个key值,更新,add报错
      var req = store.put({name:‘tommmm’,age:15})
      req.onsuccess = function () {
      alert(“保存成功”);
      };
      });
      }
      / 获取单个 * /
      function get() {
      getConnection(function (db) {
      //开启事务
      var tx = db.transaction([“Users”],“readwrite”);
      //获取对象仓库
      var store = tx.objectStore(“Users”);
      var req = store.get(1);
      req.onsuccess = function () {
      console.log(this.result);
      };
      })
      }
      / 删除 * */
      function del() {
      getConnection(function (db) {
      //开启事务
      var tx = db.transaction([“Users”],“readwrite”);
      //获取对象仓库
      var store = tx.objectStore(“Users”);
      var req = store.delete(1);
      req.onsuccess = function () {
      var result = this.result;
      console.log(“删除成功”,result);
      };
      })
      }
      2.API
      网址：https://www.w3.org/TR/IndexedDB/
      1)indexedDB【对象】
      open(name,version) 返回IDBOpenDBRequest的一个实例对象
      deleteDatabase(name) 删除数据库，参数为数据库的名字
      2)IDBOpenDBRequest open函数的返回值
      onsuccess 成功之后触发的事件
      onerror 失败之后触发的事件
      onupgradeneeded 版本更新之后触发的事件，一般在这里获取数据库对象之后，创建对象仓库

       event.target.result      IDBDatabase对象
      

      3)IDBDatabase indexedDB数据库 【构造函数】
      objectStoreNames 获取所有对象仓库的名字

       createObjectStore(storeName,{}) 	创建对象仓库参数:storeName对象仓库名optionalParameters可选，参数值为一个JS对象keyPath 		用于指定对象仓库中的每一条记录使用哪个属性值来作为该记录的主键值autoIncrement 	当取值为true时，表示主键值自增，在添加数据的时候无需指定主键值示例：	db.createObjectStore(仓库名,{keyPath:"id",autoIncrement:true});	deleteObjectStore(name)		删除对象仓库，参数为删除的对象仓库的名字transaction(stores,mode) 			获得事务参数:arr[] 表示由一些对象仓库名组成的一个字符串数组，用于定义事务的所用范围，即限定该事务中所运行的读写操作只能针对哪些对象仓库进行；当事务中的数据存取操作只针对某个对象仓库时，该参数值也可以为一个由该对象仓库名；也可以为idb.objectStoreNames,表示由该数据库中所有对象仓库名构成的数组(不建议使用)。mode 可选参数，用于定义事务的读写模式示例：var transaction = db.transaction(storeName,"readwrite");
      

      4)IDBTransaction indexedDB事务 【构造函数】
      objectStore(storeName) 获取对象仓库。参数为仓库名
      5)IDBObjectStore indexedDB对象仓库 【构造函数】
      put(obj) 添加。添加数据，重复添加会更新原有数据
      add(obj) 添加。添加数据，重复添加会报错
      get(key) 通过主键获取
      getAll() 获取所有
      delete(key) 通过主键删除
      clear() 删除所有
      【返回值是IDBRequest对象，如果执行成功，则进行后续操作】
      6)IDBRequest indexedDB请求对象,是仓库对象执行方法之后的返回值【构造函数】
      onsuccess 成功之后触发的事件
      onerror 失败之后触发的事件
      result 结果集
      创建对象仓库,在版本更新的时候
      btns[0].onclick = function(){
      // 打开数据库
      var request = indexedDB.open(‘user’,‘2.0’)
      request.onsuccess = function(){
      console.log(‘数据库创建成功或者链接成功’)
      // 在成功的时候获取数据库对象
      console.log(this.result)
      // 可以在这里获取事务对象,获取对象仓库,增删改查

       	}	request.onerror = function(){}// 版本更新的时候request.onupgradeneeded = function(){console.log('版本更新')// 判断是不是有if(this.result.objectStoreNames.contains("Student")){this.result.deleteObjectStore("Student");}// 创建对象仓库this.result.createObjectStore("Student",{keyPath:"id",autoIncrement:true });console.log('创建对象仓库成功')}}var store;// 获取对象仓库btns[1].onclick = function(){// 链接数据库var request = indexedDB.open('user')request.onsuccess=function(){// 获取数据库对象var db = this.result// 通过数据库对象获取事务对象var ts = db.transaction('Student','readwrite')// 通过事务对象获取对象仓库var store = ts.objectStore("Student");console.log(store)}}添加/修改数据btns[2].onclick=function(){var request = indexedDB.open('user')request.onsuccess=function(){// 获取数据库对象var db = this.result// 通过数据库对象获取事务对象var ts = db.transaction('Student','readwrite')// 通过事务对象获取对象仓库store = ts.objectStore("Student");// put遇到同一个key值,更新,add报错var req = store.put({name:'tommmm',age:15,id:1})req.onsuccess = function () {alert("保存成功");};				}查询btns[4].onclick=function(){var request = indexedDB.open('user')request.onsuccess=function(){// 获取数据库对象var db = this.result// 通过数据库对象获取事务对象var ts = db.transaction('Student','readwrite')// 通过事务对象获取对象仓库store = ts.objectStore("Student");// put遇到同一个key值,更新,add报错var req = store.getAll()req.onsuccess = function () {console.log('查询成功',this.result)};}}删除btns[3].onclick=function(){var request = indexedDB.open('user')request.onsuccess=function(){// 获取数据库对象var db = this.result// 通过数据库对象获取事务对象var ts = db.transaction('Student','readwrite')// 通过事务对象获取对象仓库store = ts.objectStore("Student");// put遇到同一个key值,更新,add报错var req = store.delete(2)req.onsuccess = function () {alert("删除成功");};}			}
      

4.本地数据库
web sql
关系型数据库 可以使用sql语句
火狐不支持
indexedDB
非关系型数据库 不可以使用sql
键值对
按记录存储,一个记录表示一条数据
火狐,谷歌都支持
本地存储
web storage
只能存储字符串
非字符串数据要转换成字符串,自带的转换机制
toString()
sessionStorage
会话存储
只在当前选项卡有效
localStorage
存储在本地的硬盘中,
在整个浏览器有效
即使关闭了浏览器,我们的数据仍然存在
cookies
安全性低
容量小
js
单线程
var total = 0
for(var i=0;i<1000000000000;i++){
total +=i
}
console.log(total)
异步
处理
前后台交互的时候 处理异步
promise机制 优化异步
定时器
setInterval
setTimeOut
web workers
单线程
var total = 0
for(var i=0;i<1000000000000;i++){
total +=i
}
console.log(total)
放到后台执行
前台照常运行下去
等后台的循环跑完之后,再返回给前台
后台
监听代码,监听前台有没有给我发指令
onmessage = function(event){
var total = 0
event.data是前台传过来的值
for(var i=0;i<event.data;i++){
total +=i
}
}
告诉前台,把total给前台
postMessage(total)
前台代码
var worker = new Worker(‘后台代码的路径’)
用来监听后台是否运行完成
worker.onmessage = function(event){

}
worker.postMessage(1000000000)

这篇关于html的新特性(如媒体文件,画布,拖放,本地数据库)的属性以及使用的详细步骤的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---