html5 打印api,HTML5的API(一)
API,简单来讲就是接口。
DOM是html给js的接口,BOM是浏览器给html的接口。
列举下HTML5中的API:
1.canvas(具体内容见:https://my.oschina.net/u/3502371/blog/1058178)
2.SVG
指可伸缩矢量图形,可在任何的分辨率下被高质量地打印,用于定义网络的基于矢量的图形。
svg和canvas的区别:
svg绘制的是矢量图,canvas绘制的是位图;
svg使用XML来绘制图片,canvas使用JavaScript来绘制图片;
svg的兼容性好,canvas需要兼容H5的浏览器;
svg可以给每个图形绑定事件,canvas不可以;
应用领域:图标、地图
在HTML中使用SVG:
svg
var rect = document.getElementById('myrect');
rect.onclick = function() {
alert('svg');
}
3.地理定位
navigator.geolocation
获取地理位置:
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);
监控当前位置
navigator.geolocation.watchPosition(successCallback,errorCallback,options);
停止监控当前位置
navigator.geolocation.clearWatch();
Position对象
errorPosition对象
选项
Position对象
//获取地理定位
navigator.geolocation.getCurrentPosition(function(position) {
//获取纬度:
var latitude = position.coords.latitude;
//获取经度
var longitude = position.coords.longitude;
//获取海拔
var altitude = position.coords.altitude;
//坐标精度
var accuracy = position.coords.accuracy;
//海拔精度
var altitudeAccuracy = position.coords.altitudeAccuracy;
//行进方向heading
//行进速度speed
//时间timestamp
},function(error) {
console.log('地理位置获取失败:' + error.code + ':' + error.message);
},{
//是否得到最佳 返回true|false
enableHighAccuracy:true,
//超时时间
timeout:5000,
//是否接受的缓存时间
maximumAge:true
})
注意:chrome、firefox、微信等浏览器要成功获取地理位置,网页必须使用https协议打开
4.多媒体
多媒体元素标签:
多媒体
视频DOM属性:
src 音/视频来源
autoplay 自动播放
muted 是否静音
volume 获取或设置音量
……
视频DOM方法:
play() 播放
pause() 暂停
load() 重新加载
……
视频DOM事件:
onplay 播放
onpause 暂停
……
视频插件
ckplayer flash/h5
jplayer flash/h5
flowplayer flash/h5
video.js h5
flv.js flash
5.拖放
属性:
draggable 控制元素是否可以被拖动(所有元素都有) true/false
事件:
绑定给目标元素的事件
ondragenter
ondragleave
ondragstart
ondragover
ondrop
绑定给拖放元素的事件
ondragstart
ondragend
ondrag
dragEvent:
dataTransfer 用于不同event之间的数据交换
setData(key,value)
getData(key)
拖放
#drag-box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
background: pink;
cursor: pointer;
}
#box {
margin: 20px auto;
padding: 10px;
width: 1200px;
height: 300px;
border: 2px solid #aaa;
background: #eee;
}
#box.over {
border: 2px dashed #aaa;
transform:scale(0.9,0.9);
}
//获取目标元素
var box = document.getElementById('box');
function dragstart(ele,en) {
//把id存入dataTransfer
en.dataTransfer.setData('id',ele.id);
}
//当拖拽元素进入目标元素
box.addEventListener('dragenter',function() {
this.classList.add('over');
})
//当拖拽运算离开目标元素
box.addEventListener('dragleave',function() {
this.classList.remove('over');
})
//当拖拽元素在目标元素上
box.addEventListener('dragover',function(en) {
//阻止默认事件
en.preventDefault();
})
//当拖拽元素放在目标元素上
box.addEventListener('drop',function(en) {
//取到id
var id = en.dataTransfer.getData('id');
this.appendChild(document.getElementById(id));
this.classList.remove('over');
})
html5 打印api,HTML5的API(一)相关推荐
- html浏览位置坐标,HTML5教程 | HTML5地理定位(GeoLocation API)
HTML5 GeoLocation API(地理定位API)可以获取用户所在的地理位置.由于安全的原因,在使用HTML5 GeoLocation的时候,会弹出对话框让用户决定是否共享他们所在的位置,只 ...
- html5在线api,HTML5 历史记录API
HTML5 历史记录API HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用.浏览器的兼容性.语法定义及它的属性值详细资料等. HTML5历史记录API使您可以通过Ja ...
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参 ...
- java swing调用H5_atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97...
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1.实现html5化界面的要解决的策略 1.1.Js交互 Firefox与Chro ...
- HTML5页面调用百度地图API,获取当前位置并导航到目的地
微信也可用, <!DOCTYPE html> <html lang="zh-cmn-Hans"><meta charset="UTF-8&q ...
- html5 地理api,HTML5地理定位-Geolocation API
HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息 Geolocation API使用方法: 1.判断是否支持 navigator.ge ...
- html5 geolocation 百度地图,html5 geolocation配合百度地图api实现定位
1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用 ...
- HTML5 桌面通知:Notification API 的应用
2019独角兽企业重金招聘Python工程师标准>>> 先看效果: image.png 这是利用html5桌面通知Notification API实现的,先看看代码,再分析Notif ...
- html5media使用api,html5中media(播放器)的api使用指南.pdf
代码如下 : HTML Audio API HTML5 Audio API HTML5 Audio API demo by " target="_blank">Le ...
- HTML5 Speech API和Audio API
http://item.congci.com/item/html5-speech-api-and-audio-api 浏览器提供语音搜索已经不是什么新鲜事,在google上搜索了一下speech ap ...
最新文章
- 谈一谈UNet图像分割
- 实施ERP系统要先进行思考
- 一步一步学习SignalR进行实时通信_6_案例
- Kali Linux 2016.2发布提供虚拟机以及系统镜像下载
- Dubbo——增强SPI的实现
- mybatis generator使用总结
- 高斯计工作原理和高斯计使用方法图解
- word 2013 长篇文档排版案例教程
- 多元函数的极限、连续
- 【航拍中国第二季】甘肃笔记
- CAD创建组却没有组合在一起?
- Linux下Linpack测试CPU性能的相关参数配置以及执行命令
- [从头学数学] 第203节 坐标系与参数方程
- IDEA的最新UI不用申请试用了,教你30秒搞定!
- Hexo博客配置笔记
- 32/64位系统支持多大内存
- PHP链接ctp接口,CTP接口穿透式监管升级后对外接入地址变更,适用SIMNOW 模拟账户...
- 软考中级软件评测师备考详细资料
- 大地测量学小脚本分享
- 虚拟现实技术vr可以用来干什么?虚拟现实技术vr有什么特征
热门文章
- java多线程同步与死锁,廖雪峰Java11多线程编程-2线程同步-3死锁
- 2021年安徽高考英语口试成绩查询,2021高考英语口语考试成绩
- 只显示小方格_不妨谈谈二维方格子吧
- centos7下安装mysql5.6_Linux-CentOS7下安装mysql5.6常见问题解决!
- 问题 A: 青蛙约会(数学)
- P1067 多项式输出(模拟)
- #1049 : 后序遍历(二叉树,DFS)
- 如何降低微服务测试成本?
- Serverless在编程教育中的实践
- 第九届蓝桥杯省赛JavaC组真题——详细答案对照(完整版)