5 个强劲的HTML5 API 涵数强烈推荐

日期:2021-01-20 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

HTML5出示了1些十分强劲的JavaScript和HTML API,来协助开发设计者搭建精彩的桌面上和挪动运用程序流程。本文将详细介绍5个新式的API,期待对你的开发设计工作中有一定的协助。

  1.  全屏API(Fullscreen API)

  该API容许开发设计者以程序编写方法将Web运用程序流程全屏运作,使Web运用程序流程更像当地运用程序流程。


拷贝编码
编码以下:

// 寻找合适访问器的全屏方式
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// 起动全屏方式
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element

  2.  网页页面可见性API(Page Visibility API)

  该API能够用来检验网页页面针对客户的可见性,即回到客户当今访问的网页页面或标识的情况转变。


拷贝编码
编码以下:

// 设定掩藏特性和可见更改恶性事件的名字,特性必须加访问器前缀
// since some browsers only offer vendor-prefixed support
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// 加上1个题目更改的监视器
document.addEventListener(visibilityChange, function(e) {
// 刚开始或终止情况解决
}, false);

 
  3.  getUserMedia API

  该API容许Web运用程序流程浏览摄像头和话筒,而不用应用软件。


拷贝编码
编码以下:

// 设定恶性事件监视器
window.addEventListener("DOMContentLoaded", function() {
// 获得元素
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// 设定video监视器
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

  4.  电池API(Battery API)

  这是1个对于挪动机器设备运用程序流程的API,关键用于检验机器设备电池信息内容。


拷贝编码
编码以下:

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// 电池特性
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);
// 加上恶性事件监视器
battery.addEventListener("chargingchange", function(e) {
console.warn("Battery charge change: ", battery.charging);
}, false);

  5.  Link Prefetching

  预载入网页页面內容,为访问者出示1个光滑的访问体验。


拷贝编码
编码以下:

<!-- full page -->
<link rel="prefetch" href="<a href="http://davidwalsh.name/css-enhancements-user-experience">http://davidwalsh.name/css-enhancements-user-experience</a>" />
<!-- just an image -->

以上便是这5个新式的API了,小伙子伴们掌握了吗,有甚么疑惑请留言,大伙儿1起探讨,相互发展。

上一篇:手机微信营销推广的3大优点! 返回下一篇:没有了