前言：本文源于前几天看到的一条微博：
对于这种言论我并不赞同。我大学学的是化学，没有学习过计算机专业的课程，但我认为至少这个问题并不需要多么高端的计算机专业知识，只要中学数学没有全还给老师，就应该能给出至少一种解法。比如说，我就随便涂了一个多边形和一个点，现在我要找出一种通用的方法来判断这个点是不是在多边形内部（别告诉我用肉眼观察……）。
首先想到的一个解法是从这个点做一条射线，计算它跟多边形边界的交点个数，如果交点个数为奇数，那么点在多边形内部，否则点在多边形外。
这个结论很简单，那它是怎么来的？其实，对于平面内任意闭合曲线，我们都可以直观地认为，曲线把平面分割成了内、外两部分，其中“内”就是我们所谓的多边形区域。
基于这一认识，对于平面内任意一条直线，我们可以得出下面这些结论：
直线穿越多边形边界时，有且只有两种情况：进入多边形或穿出多边形。
在不考虑非欧空间的情况下，直线不可能从内部再次进入多边形，或从外部再次穿出多边形，即连续两次穿越边界的情况必然成对。
直线可以无限延伸，而闭合曲线包围的区域是有限的，因此最后一次穿越多边形边界，一定是穿出多边形，到达外部。
现在回到我们最初的题目。假如我们从一个给定的点做射线，还可以得出下面两条结论：
如果点在多边形内部，射线第一次穿越边界一定是穿出多边形。
如果点在多边形外部，射线第一次穿越边界一定是进入多边形。
把上面这些结论综合起来，我们可以归纳出：
当射线穿越多边形边界的次数为偶数时，所有第偶数次（包括最后一次）穿越都是穿出，因此所有第奇数次（包括第一次）穿越为穿入，由此可推断点在多边形外部。
当射线穿越多边形边界的次数为奇数时，所有第奇数次（包括第一次和最后一次）穿越都是穿出，由此可推断点在多边形内部。
到这里，我们已经了解这个解法的思路了，下面接着看算法实现的一些具体问题和边界条件的处理。
点在多边形的边上
上面我们讲到，这个解法的主要思路就是计算射线穿越多边形边界的次数，那么对于点在多边形的边上这种特殊情况，射线出发的这一次，是否应该算作穿越呢？
看了上面的图就会发现，不管算不算穿越，都会陷入两难的境地——同样落在多边形边上的点，可能会得到相反的结果。这显然是不正确的，因此对这种特殊情况需要特殊处理。
点和多边形的顶点重合
这其实是第一种情况的一个特例。
射线经过多边形顶点
射线刚好经过多边形顶点的时候，应该算一次还是两次穿越？这种情况比前两种复杂，也是实现中的难点。
射线刚好经过多边形的一条边
这是上一种情况的特例，也就是说，射线连续经过了多边形的两个相邻顶点。
解决方案：
判断点是否在线上的方法有很多，比较简单直接的就是计算点与两个多边形顶点的连线斜率是否相等，中学数学都学过。
点和多边形顶点重合的情况更简单，直接比较点的坐标就行了。
顶点穿越看似棘手，其实我们换一个角度，思路会大不相同。先来回答一个问题，射线穿越一条线段需要什么前提条件？没错，就是线段两个端点分别在射线两侧。只要想通这一点，顶点穿越就迎刃而解了。这样一来，我们只需要规定被射线穿越的点都算作其中一侧。
如上图，假如我们规定射线经过的点都属于射线以上的一侧，显然点 D 和发生顶点穿越的点 C 都位于射线 Y 的同一侧，所以射线 Y 其实并没有穿越 CD 这条边。而点 C 和点 B 则分别位于射线 Y 的两侧，所以射线 Y 和 BC 发生了穿越，由此我们可以断定点 Y 在多边形内。同理，射线 X 分别与 AD 和 CD 都发生了穿越，因此点 X 在多边形外，而射线 Z 没有和多边形发生穿越，点 Z 位于多边形外。
解决了第三点，这一点就毫无难度了。根据上面的假设，射线连续经过的两个顶点显然都位于射线以上的一侧，因此这种情况看作没有发生穿越就可以了。由于第三点的解决方案实际上已经覆盖到这种特例，因此不需要再做特别的处理。
这种简单直观的算法通常叫做射线法或奇偶法，下面给出 JavaScript 的算法实现。
/**
* @description 射线法判断点是否在多边形内部
* @param {Object} p 待判断的点，格式：{ x: X 坐标, y: Y 坐标 }
* @param {Array} poly 多边形顶点，数组成员的格式同 p
* @return {String} 点 p 和多边形 poly 的几何关系
*/function rayCasting(p, poly) {
var px = p.x,
py = p.y,
flag = false
for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
var sx = poly[i].x,
sy = poly[i].y,
tx = poly[j].x,
ty = poly[j].y
// 点与多边形顶点重合
if((sx === px && sy === py) || (tx === px && ty === py)) {
return 'on'
}
// 判断线段两端点是否在射线两侧
if((sy < py && ty >= py) || (sy >= py && ty < py)) {
// 线段上与射线 Y 坐标相同的点的 X 坐标
var x = sx + (py - sy) * (tx - sx) / (ty - sy)
// 点在多边形的边上
if(x === px) {
return 'on'
}
// 射线穿过多边形的边界
if(x > px) {
flag = !flag
}
}
}
// 射线穿过多边形边界的次数为奇数时点在多边形内
return flag ? 'in' : 'out'}除了射线法还有很多其他的方法，下面再介绍一种回转数法。
平面中的闭合曲线关于一个点的回转数（又叫卷绕数），代表了曲线绕过该点的总次数。下面这张图动态演示了回转数的概念：图中红色曲线关于点（人所在位置）的回转数为 2。
回转数是拓扑学中的一个基本概念，具有很重要的性质和用途。本文并不打算在这一点上展开论述，这需要具备相当的数学知识，否则会非常乏味和难以理解。我们暂时只需要记住回转数的一个特性就行了：当回转数为 0 时，点在闭合曲线外部（回转数大于 0 时所代表的含义，大家可以自己想一想，还是很有趣的）。
对于给定的点和多边形，回转数应该怎么计算呢？
用线段分别连接点和多边形的全部顶点。
计算所有点与相邻顶点连线的夹角。
计算所有夹角和。注意每个夹角都是有方向的，所以有可能是负值。
最后根据角度累加值计算回转数。看过前面的介绍，很容易理解 360°（2π）相当于一次回转。
思路介绍完了，下面两点是实现中需要留意的问题。
JavaScript 的数只有 64 位双精度浮点这一种。对于三角函数产生的无理数，浮点数计算不可避免会造成一些误差，因此在最后计算回转数时需要做取整操作。
通常情况下，平面直角坐标系内一个角的取值范围是 -π 到 π 这个区间，这也是 JavaScript 三角函数
Math.atan2()返回值的范围。但 JavaScript 并不能直接计算任意两条线的夹角，我们只能先计算两条线与 X 正轴夹角，再取两者差值。这个差值的结果就有可能超出 -π 到 π 这个区间，因此我们还需要处理差值超出取值区间的情况。
这里也给出回转数法的 JavaScript 实现。
/**
* @description 回转数法判断点是否在多边形内部
* @param {Object} p 待判断的点，格式：{ x: X 坐标, y: Y 坐标 }
* @param {Array} poly 多边形顶点，数组成员的格式同 p
* @return {String} 点 p 和多边形 poly 的几何关系
*/function windingNumber(p, poly) {
var px = p.x,
py = p.y,
sum = 0
for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
var sx = poly[i].x,
sy = poly[i].y,
tx = poly[j].x,
ty = poly[j].y
// 点与多边形顶点重合或在多边形的边上
if((sx - px) * (px - tx) >= 0 && (sy - py) * (py - ty) >= 0 && (px - sx) * (ty - sy) === (py - sy) * (tx - sx)) {
return 'on'
}
// 点与相邻顶点连线的夹角
var angle = Math.atan2(sy - py, sx - px) - Math.atan2(ty - py, tx - px)
// 确保夹角不超出取值范围（-π 到 π）
if(angle >= Math.PI) {
angle = angle - Math.PI * 2
} else if(angle <= -Math.PI) {
angle = angle + Math.PI * 2
}
sum += angle
}
// 计算回转数并判断点和多边形的几何关系
return Math.round(sum / Math.PI) === 0 ? 'out' : 'in'}也有人问到像下面这种复杂多边形有没有办法？答案是肯定的。至于为什么，就留给大家思考吧。
天地图：https://map.tianditu.gov.cn/
开放平台：http://lbs.tianditu.gov.cn/
控制台：https://console.tianditu.gov.cn/
| 版本 | 类参考 | 代码示例 |
| JavaScript API 4.0 | 类参考 | 代码示例 |
| JavaScript API 4.0 开源库 |
资源引用、类参考及示例 |
|
若不显示地图，请添加域名白名单。
坐标系：CGCS 2000（国家大地坐标系）
| 版本 | 参考手册 | 示例中心 |
| JS API v2 | 参考手册 | 示例中心 |
| JS API v1 | 参考手册 | 示例中心 |
更多：坐标获取
坐标系：GCJ-02（火星坐标、国测局坐标系）
控制台：http://lbsyun.baidu.com/apiconsole/center
| 版本 | 类参考 | 示例DEMO |
| JavaScript API GL | 类参考 | 示例DEMO |
| JavaScript API v3.0 | 类参考 | 示例DEMO |
更多：拾取坐标系统
坐标系：BD-09（百度坐标）
腾讯地图：https://map.qq.com/
PC端于2022年11月11日停止服务
开放平台（腾讯位置服务）：https://lbs.qq.com/
控制台：https://lbs.qq.com/dev/console
| 版本 | 参考手册 | 示例 |
| JavaScript API GL | 参考手册 | 示例 |
坐标系：GCJ-02（火星坐标、国测局坐标系）
| 百度地图 | 天地图 | |
| 初始化地图 | var map = new BMap.Map("allmap"); | var map = new T.Map("allmap"); |
| 将覆盖物添加到地图 | addOverlay(overlay: Overlay) | addOverLay(overlay:OverLay) |
| 从 Map 的 click 事件中获取坐标点 | map.addEventListener("click", function (e) { Point = e.point; } | map.addEventListener("click", function (e) { LngLat = e.lnglat; } |
| 坐标点 | new BMap.Point(lng: Number, lat: Number) | new T.LngLat(lng: Numbe, lat: Number) |
| 像素点 | new BMap.Pixel(x: Number, y: Number) | new T.Point(x: Number, y: Number) |
| 文本标注 | | |
| 设置文本标注样式 | setStyle(styles: Object) | 每个样式使用单独的 set 方法实现 |
| 图像标注 | | |
| 为图像标注添加文本标注 | Marker.setLabel(label: Label) | 无。 可借用 title（鼠标掠过显示）属性来实现，并通过 Marker.options.title 来获取值 |
| 从图像标注获取坐标点 | Point = Marker.getPosition(); | LngLat = Marker.getLngLat(); |
| 绘制折线 | | |
| 绘制多边形 | | |
| 设置多边形的点数组 | Polygon.setPath(points: Array<Point>) | Polyline.setLngLats(lnglats: Array<LngLat>) |
| 设置地图视野 | Map.setViewport(view: Array<Point> | Viewport, viewportOptions: ViewportOptions) | Map.setViewport(view: Array<LngLat>) |
WGS-84（地球坐标）
用于 GPS 模块 及 Google Earth
GCJ-02（火星坐标、国测局坐标系）
用于 Google Map、必应-中国地图、高德、腾讯、图灵、阿里地图，是对地理位置的一次加密
BD-09（百度坐标）
仅用于百度地图，是对火星坐标的再次加密
CGCS 2000（国家大地坐标系）
用于天地图，与 WGS-84 最大差异 0.11mm
坐标转换：https://github.com/wandergis/coordtransform
微信网页开发的获取地理位置接口（wx.getLocation）默认使用 wgs84，可选 gcj02。
微信网页开发的使用微信内置地图查看位置接口（wx.openLocation）支持 gcj02。
编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。
十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；
十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；
八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；
六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；
四年前，我们开始研究自动化工具，自动化测试，谁没玩过nodejs都不好意思说是页面仔；
二年前，各种终端风起云涌，响应式、APP开发都成为了我们研究的范围，CSS3动画开始风靡；
如今，CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉，你是否开始探寻，接下来，我们可以玩什么，来为我们项目带来一丝新意？
没错，本文就是以HTML5 Device API为核心，对HTML5的一些新接口作了一个完整的测试，希望能让大家有所启发。
目录：
一、让音乐随心而动 – 音频处理 Web audio API
二、捕捉用户摄像头 – 媒体流 Media Capture
三、你是逗逼？ – 语音识别 Web Speech API
四、让我尽情呵护你 – 设备电量 Battery API
五、获取用户位置 – 地理位置 Geolocation API
六、把用户捧在手心 – 环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API
一、让音乐随心而动 – 音频处理 Web audio API
简介：
Audio对象提供的只是音频文件的播放，而Web Audio则是给了开发者对音频数据进行分析、处理的能力，比如混音、过滤。
系统要求：
ios6+、android chrome、android firefox
实例：
http://sy.qq.com/brucewan/device-api/web-audio.html
核心代码：
var context = new webkitAudioContext();
var source = context.createBufferSource(); // 创建一个声音源
source.buffer = buffer; // 告诉该源播放何物
createBufferSourcesource.connect(context.destination); // 将该源与硬件相连
source.start(0); //播放
技术分析：
当我们加载完音频数据后，我们将创建一个全局的AudioContext对象来对音频进行处理，AudioContext可以创建各种不同功能类型的音频节点AudioNode，比如
1、源节点（source node）
我们可以使用两种方式加载音频数据：
<1>、audio标签
var sound, audio = new Audio();
audio.addEventListener('canplay', function() {
sound = context.createMediaElementSource(audio);
sound.connect(context.destination);
});
audio.src = '/audio.mp3';
<2>、XMLHttpRequest
var sound, context = createAudioContext();
var audioURl = '/audio.mp3'; // 音频文件URL
var xhr = new XMLHttpRequest();
xhr.open('GET', audioURL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
context.decodeAudioData(request.response, function (buffer) {
source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
}
}
xhr.send();
2、分析节点（analyser node）
我们可以使用AnalyserNode来对音谱进行分析，例如：
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
// 将dataArray数据以canvas方式渲染出来
};
draw();
3、处理节点（gain node、panner node、wave shaper node、delay node、convolver node等）
不同的处理节点有不同的作用，比如使用BiquadFilterNode调整音色（大量滤波器）、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐淡入淡出等等。
需要了解更多的音频节点可能参考：
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
4、目的节点（destination node）
所有被渲染音频流到达的最终地点
思维发散：
1、可以让CSS3动画跟随背景音乐舞动，可以为我们的网页增色不少；
2、可以尝试制作H5酷酷的变声应用，增加与用户的互动；
3、甚至可以尝试H5音乐创作。
看看google的创意：http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html
二、捕捉用户摄像头 – 媒体流 Media Capture
简介：
通过getUserMedia捕捉用户摄像头获取视频流和通过麦克风获取用户声音。
系统要求：
android chrome、android firefox
实例：
捕获用户摄像头 捕获用户麦克风
http://sy.qq.com/brucewan/device-api/camera.html
http://sy.qq.com/brucewan/device-api/microphone-usermedia.html
核心代码：
1、摄像头捕捉
navigator.webkitGetUserMedia ({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, function(e){
})
2、从视频流中拍照
btnCapture.addEventListener('touchend', function(){
if (localMediaStream) {
canvas.setAttribute('width', video.videoWidth);
canvas.setAttribute('height', video.videoHeight);
ctx.drawImage(video, 0, 0);
}
}, false);
3、用户声音录制
navigator.getUserMedia({audio:true}, function(e) {
context = new audioContext();
audioInput = context.createMediaStreamSource(e);
volume = context.createGain();
recorder = context.createScriptProcessor(2048, 2, 2);
recorder.onaudioprocess = function(e){
recordingLength += 2048;
recorder.connect (context.destination);
}
}, function(error){});
4、保存用户录制的声音
var buffer = new ArrayBuffer(44 + interleaved.length * 2);
var view = new DataView(buffer);
fileReader.readAsDataURL(blob); // android chrome audio不支持blob
… audio.src = event.target.result;
思维发散：
1、从视频拍照自定义头像；
2、H5视频聊天；
3、结合canvas完成好玩的照片合成及处理；
4、结合Web Audio制作有意思变声应用。
三、你是逗逼？ – 语音识别 Web Speech API简介：
1、将文本转换成语音；
2、将语音识别为文本。
系统要求：
ios7+，android chrome，android firefox
测试实例：
http://sy.qq.com/brucewan/device-api/microphone-webspeech.html
核心代码：
1、文本转换成语音，使用SpeechSynthesisUtterance对象；
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1
msg.text = ‘识别的文本内容’;
msg.lang = 'en-US';
speechSynthesis.speak(msg);
2、语音转换为文本，使用SpeechRecognition对象。
var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event){
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
final_transcript += event.results[i][0].transcript;
}
};
测试结论：
1、Android支持不稳定；语音识别测试失败（暂且认为是某些内置接口被墙所致）。
思维发散：
1、当语音识别成为可能，那声音控制将可以展示其强大的功能。在某些场景，比如开车、网络电视，声音控制将大大改善用户体验；
2、H5游戏中最终分数播报，股票信息实时声音提示，Web Speech都可以大放异彩。
四、让我尽情呵护你 – 设备电量 Battery API简介：
查询用户设备电量及是否正在充电。
系统要求：
android firefox
测试实例：
http://sy.qq.com/brucewan/device-api/battery.html
核心代码：
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
var str = '';
if (battery) {
str += '<p>你的浏览器支持HTML5 Battery API</p>';
if(battery.charging) {
str += '<p>你的设备正在充电</p>';
} else {
str += '<p>你的设备未处于充电状态</p>';
}
str += '<p>你的设备剩余'+ parseInt(battery.level*100)+'%的电量</p>';
} else {
str += '<p>你的浏览器不支持HTML5 Battery API</p>';
}
测试结论：
1、QQ浏览器与UC浏览器支持该接口，但未正确显示设备电池信息；
2、caniuse显示android chrome42支持该接口，实测不支持。
思维发散：
相对而言，我觉得这个接口有些鸡肋。
很显然，并不合适用HTML5做电池管理方面的工作，它所提供的权限也很有限。
我们只能尝试做一些优化用户体验的工作，当用户设备电量不足时，进入省电模式，比如停用滤镜、摄像头开启、webGL、减少网络请求等。
五、获取用户位置 – 地理位置 Geolocation简介：
Geolocation API用于将用户当前地理位置信息共享给信任的站点，目前主流移动设备都能够支持。
系统要求：
ios6+、android2.3+
测试实例：
http://sy.qq.com/brucewan/device-api/geolocation.html
核心代码：
var domInfo = $("#info");
// 获取位置坐标
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
domInfo.innerHTML="抱歉，你的浏览器不支持地理定位！";
}
// 使用腾讯地图显示位置
function showPosition(position) {
var lat=position.coords.latitude;
var lon=position.coords.longitude;
mapholder = $('#mapholder')
mapholder.style.height='250px';
mapholder.style.width = document.documentElement.clientWidth + 'px';
var center = new soso.maps.LatLng(lat, lon);
var map = new soso.maps.Map(mapholder,{
center: center,
zoomLevel: 13
});
var geolocation = new soso.maps.Geolocation();
var marker = null;
geolocation.position({}, function(results, status) {
console.log(results);
var city = $("#info");
if (status == soso.maps.GeolocationStatus.OK) {
map.setCenter(results.latLng);
domInfo.innerHTML = '你当前所在城市: ' + results.name;
if (marker != null) {
marker.setMap(null);
}
// 设置标记
marker = new soso.maps.Marker({
map: map,
position:results.latLng
});
} else {
alert("检索没有结果，原因: " + status);
}
});
}
测试结论：
1、Geolocation API的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序。
2、初测3g环境下比wifi环境理定位更准确；
3、测试三星 GT-S6358(android2.3) geolocation存在，但显示位置信息不可用POSITION_UNAVAILABLE。
六、把用户捧在手心 – 环境光 Ambient Light简介：
Ambient Light API定义了一些事件，这些时间可以提供源于周围光亮程度的信息，这通常是由设备的光感应器来测量的。设备的光感应器会提取出辉度信息。
系统要求：
android firefox
测试实例：
http://sy.qq.com/brucewan/device-api/ambient-light.html
核心代码：
这段代码实现感应用前当前环境光强度，调整网页背景和文字颜色。
var domInfo = $('#info');
if (!('ondevicelight' in window)) {
domInfo.innerHTML = '你的设备不支持环境光Ambient Light API';
} else {
var lightValue = document.getElementById('dl-value');
window.addEventListener('devicelight', function(event) {
domInfo.innerHTML = '当前环境光线强度为：' + Math.round(event.value) + 'lux';
var backgroundColor = 'rgba(0,0,0,'+(1-event.value/100) +')';
document.body.style.backgroundColor = backgroundColor;
if(event.value < 50) {
document.body.style.color = '#fff'
} else {
document.body.style.color = '#000'
}
});
}
思维发散：
该接口适合的范围很窄，却能做出很贴心的用户体验。
1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品，我们自然可以调整我们背景与文字颜色让用户感觉到舒适，我们还可以来一段安静的音乐，甚至使用Web Speech API播报当前时间，并说一声“晚安”，何其温馨；
2、该接口也可以应用于H5游戏场景，比如日落时分，我们可以在游戏中使用安静祥和的游戏场景；
3、当用户在工作时间将手机放在暗处，偷偷地瞄一眼股市行情的时候，我们可以用语音大声播报，“亲爱的，不用担心，你的股票中国中车马上就要跌停了”，多美的画面。
参考文献：
https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com/
http://www.w3.org/2009/dap/
原文：http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/
翻译：叮当当咚当当小胖妞呀
从IOS6开始，苹果公司就一直建议我们使用自适应布局，但是迄今为止，我发现大家都在回避这个问题，考虑的最多的仍然是固定布局。
iPhone 6的上市让人们很难再去逃避自适应布局这个问题，四种屏幕尺寸（如果要支持iPad就要上升到5种）、三种分辨率和转向似乎让着手于自适应布局变得更加简单。
在文章的最后，你应该能流畅使用 storyboards、 约束(constraints)和 size class特性，这三个是Apple为开发和制作自适应布局提供的Xcode工具。
所以下载Xcode6，给自己来杯饮料，留上一个小时的时间，让我们开始吧！
- Storyboards
- 模拟尺寸
- 约束
- 头部和尾部空间
- 横向空间约束
- 同等宽度约束
- 纵横比约束
- 约束管理
- 添加约束
- 检查和编辑现有约束
- 删除约束
- 布局问题和冲突
- 错位视图警告
- 约束缺失错误
- Size Classes
- 宽度和高度特性
- 我们的目标…
- 为通用的size class添加约束
- 为iPhone纵向布局添加约束
- 为iPhone横向布局添加约束
- 编辑助手：设备预览
- 为iPad布局添加约束
- 使用布局和间隔视图
- 布局视图样例
- 间隔视图样例
- 下一步
Storyboards
Xcode中，storyboards可以让你在屏幕上拖动和放置原生对象（例如按钮、图片、文本框和标签）并且定义每个屏幕之间如何连接。
在Xcode专业术语中，可以看到、摸到、互动的用户界面元素，我们称之为 视图（按钮、图片、文本框、标签等等）。
包含并管理所有那些视图的屏幕被称为 视图控制器，我倾向于交替使用这些术语。
当我们在一个storyboard上添加视图控制器的时候，它的纵横比其实跟任何设备都不匹配，事实上，它是一个完美的600pt*600pt的正方形：
这提醒了我们，storyboard屏幕并不代表特定硬件上的屏幕，而是 任何IOS设备的抽象表现。
模拟尺寸
也许你不介意在600pt*600pt的画布上操作，但是在实际大小上操作可能会更有帮助。
我们可以非常方便的在Xcode里改变视图控制器模拟的尺寸和转向：
约束
向你们展示约束的最好方法是实例。
我们先创建一个简单的包含一个屏幕的storyboard（模拟4英寸iPhone的尺寸），再添加两个相邻的正方形。
当我们在竖屏中运行app的时候，这两个正方形完全按照我们的布局排列，当我们变成横屏时，它们仍然忠于自己的坐标：
当我们使用iPhone 6模拟器运行项目的时候，我们可以再一次看到，我们的布局并没有自适应不同的屏幕尺寸，屏幕右边多出了可见的空白区域。
这是由于没有约束，这些对象仍然会按照我们在storyboard上创建的x,y坐标和面积来定位。
所以让我们开始添加约束，看看会对它们有些什么影响。
头部和尾部空间
我们在蓝色方块前添加10pt的头部空间约束，在红色方块后添加10pt的尾部空间约束。
当我们运行项目的时候，约束把蓝色方块固定在屏幕左侧，把红色方块固定在右侧。
横向空间约束
我们在两个方块之间再添加一个10pt的横向空间约束，就像上一个约束一样，这样会让两个方块之间有一个固定的空间。
当我们运行项目的时候，会发现一个意料之外的结果：我们所有的约束都满足了，但是为了满足所有约束，其中一个方块被拉伸了。
这似乎告诉我们这样一件事：除非被告知，否则IOS会尽量让大多数对象都保持“自然”大小。
同等宽度约束
我们添加一个同等宽度约束。
当运行项目的时候，我们可以看到两个方块宽度的增量相同。
纵横比约束
最后，对两个方块添加纵横比约束。
这个约束保证了宽度和高度的比永远是相同的。
当我们运行app的时候，我们可以看到每个方块的宽度在增加，高度也同时在增加。
用iPhone 6模拟器运行项目，覆盖我们之前添加过的约束，你可以看到这两个正方形是如何利用可用空间来拉伸的。
约束管理
现在你已经看到了我们是如何使用约束的，下面我们来介绍一下具体操作。
提示：尽量少使用约束
添加约束的一个要点是试着挑战自己，越少使用约束越好。
虽然我并不认为添加的约束数量能够很大程度上影响IOS的性能，但是越少的使用约束，你的布局就会越好维护。
添加约束
在storyboard中添加约束有三个方法：
- 约束弹窗也许最好的方法就是选择一个或多个对象，从其中一个弹窗中添加约束。我认为这是个很好的方法，因为可以看到现有约束的范围。如果有一条约束不可用，可能就意味着你需要两个或更多对象来实施这条约束。
- ctrl + 拖动你可以按住ctrl键，同时拖动到一个对象上（可以是相邻对象、父级对象或者是自身），会出现一个浮层告诉你可以被添加的约束有哪些。这是我最喜欢的添加约束的方法，因为你不需要把你的鼠标移动到大老远的底部再回到对象。
- 菜单/绑定你也可以选择一个或多个对象，在菜单中点击 editor -> pin来选择约束，这其实是最没有效率的方法，但是如果你发现自己不停的重复添加一种约束，也许为一个或多个选项添加绑定更合理一点。
检查和编辑现有约束
检查视图中应用的约束最简单的办法就是选择视图，切换到Size检查面板。
或者在文档大纲层次面板中切换constant数值。
无论是哪种方法，选择约束可以让你直接更新它。
删除约束
同样的，约束也可以通过高亮+点击删除按钮来删除。
要删除一个视图的所有约束，或者屏幕中的所有约束，在布局问题弹窗中有一条捷径：
布局问题和冲突
当我们在storyboard中添加约束的时候，Xcode总会给出一些关于这些约束的警告或者错误。
有时候这些问题可以忽略不计，但是更多的时候，它们必须被解决。
查看约束警告和错误最好在文档大纲面板中，每个视图控制器会有一个红色或者黄色的icon来表示是不是有布局问题：
错位视图警告
一个比较常见的警告是错位视图警告，如果约束规定这个视图应该在的地方，和这个视图实际在的地方不匹配，那么这种警告随时会出现。
当你转换模拟尺寸或者不小心用鼠标移动了一个视图，这些警告也会出现。
点击一个错位的视图，屏幕上会出现一个虚线框，告诉你约束规定了这个视图应该在的位置。
如果点击警告，会出现一个带有几个选项的浮层，你可以选择让Xcode更新约束来匹配storyboard上的位置，也可以让Xcode更新框架来移动或者拉伸视图，使它们回到约束规定的位置。
缺失约束错误
让我们回到一开始蓝方块和红方块的例子，我们没有添加过一个关于纵向位置的约束，但当我们运行app的时候看起来完全没问题，因为IOS会认为纵向位置就是我们在storyboard上放置的位置，不过为了避免一些意料之外的行为，我们最好还是规定一下。
在 顶部布局向导添加顶部空间约束可以消除一些说不定道不明的约束和错误。
Size Classes
为了在大多数基础布局或者更高级的布局上使用约束，你需要同时使用size classes。
Size classes是一种能够告诉你物理设备宽度和高度的特性。
当我们在storyboard的屏幕上添加对象或者约束时，只有设备符合当前的宽高特性，对象才会显现，约束才会被应用。
这是一个非常有用的方法，它让我们确定了不同设备和转向下布局的变化。
高度和宽度特性
使用 紧凑(compact)、 任意(any)和 正常(regular)这三种的组合，可以让我们确定一些范围内的设备布局。
虽然不能涉及每一个变化（比如不能确定iPhone 6 Plus的竖向模式，也不能让iPad的转向消失），但是大多数的变化都可以确定。
我们说过，介绍size classes最简单的方法是实例，所以让我们看一个例子。
我们的目标…
作为例子，我们做一个Instagram详情页的简单版本，可以适应大屏和转向。
我们的目标是创建一个布局，它可以机智的适应更大的iPhone 6设备（我说的机智，是指只有照片会放大，其他的元素如头像照片仍然不变），并且当设备横屏的时候，图片和元数据会并肩排列，而不是像竖屏时的上下排列。
为通用的size class添加约束
跟之前的例子不同，这次我们不使用模拟尺寸度量，我们使用通用size class的抽象方形布局，这样会使我们记住，为这个size class添加的任何视图和约束，只能是那些添加在任意屏幕尺寸和转向上的视图和约束。
我们需要用到这些约束：
除了必要的空间、间隙和纵横比约束，我们还需要让某些对象排列在顶部或者底部。
现在，在你的storyboard上添加视图和约束吧。做这步的时候，我的storyboard长这样：
注意，现在我们有了所有转向上所需要的元素，但是我没有费心完成每个转向上的布局，下一步我们才会做！
为iPhone纵向布局添加约束
现在，我们把size class切换到 紧凑宽度和 正常高度，这个尺寸特性的组合适用于任何竖屏下的iPhone设备。
如果要切换size classes，点击storyboard中下方的size class标签，选择你想要看到的宽高组合。
注意，当你切换size class时，视图控制器的尺寸会更新来显示新的抽象布局。
最后，你可以重新定位、拉伸视图和添加竖屏上的约束了。这里有一些我添加到竖向布局上的约束：
这是我做到这步时，我的storyboard的样子：
在这个阶段，你可以用任何的iPhone模拟器（3.5、4、4.7或者5.5英寸屏幕）来运行你的项目，看看竖屏情况下的布局是否合理，虽然如果转向成横屏时，布局看上去会一团糟。
注意，我们没有固定图片的宽度，我们只是简单地把图片的左右边缘固定在屏幕两侧。当变为更大的iPhone 6屏幕尺寸时，图片会被拉伸，又因为我们添加了一个固定图片纵横比的约束，所以高度也会同时增加。
为iPhone横向布局添加约束
现在切换size class到 任意宽度和 紧凑高度，这种尺寸特性的组合适用于任何横屏下的iPhone设备，并且会为了满足横屏视图下的目标更新布局。
这次，图片的顶部、左边和底部边缘都被固定在父级视图的边缘。
这个局部另一个有意思的地方是，在评论标签上添加的尾部空间约束。
当图片的约束使得图片变大的时候，这个标签上的约束会使得自身变窄。为了适应这种视图下的文本，文本高度需要增加到两行——的确如此！
下图是我做到这步时storyboard的样子。注意，在文档大纲中，一些约束会稍稍渐隐，这些约束是在竖向视图中我们添加的，它们仍然存在，但是当我们选中当前的宽高特性时，它们不会被应用。
也要注意，当你转换宽高特性时，storyboard会更新以便显示你为那些特性增加的约束。太棒了！
现在运行项目，我们会发现当转向改变时，我们有了一个既适用于横屏又适用于竖屏的布局，更棒的是在转向时，会有一个完美的过渡动画。
我把整个过渡动画放慢，这样你们能看的更加清楚。注意动画中也有层级关系，正由于此，即使在正常布局下视图并没有重叠，我们也需要考虑如何安排视图的层级关系……
编辑助手：设备预览
Xcode另外一个很有用的东西：设备预览助手。你不再需要无数次运行项目来检查你的布局是否正确，你只需要使用编辑助手storyboard预览，选择你想要的所有设备和转向就可以了。
这并不是完美的（比如导航条的颜色在这个例子中缺失了），但是它却是一个很好地选择，它可以让你把你自己的语言切换到双倍长度伪语言，可以在你的storyboard中重复任何文本。
这是我storyboard上的预览助手，它展示了一个3.5英寸横屏和4英寸竖屏的iPhone，你可以看到我还需要再加工加工来适应更长的标签……-_-
为iPad布局添加约束
现在，切换size classes到 正常宽度和 正常高度，这是iPad横屏和竖屏的特性。
就像之前一样，我们重新定位、拉伸我们的视图。对于iPad布局，我决定使用固定尺寸的图片（所以它不会像在iPhone上那样切换横竖屏时会改变大小），元数据都显示在图片底部。
下图是我在重新排列视图并添加了约束之后的storyboard：
到现在为止，我们为某些特别的size class特性添加了约束，但是现在我们要尝试些不同的东西。
由于iPad上会有多余的空间，我们不要仅仅只是重排视图，让我们来加一点额外的内容。对于这个例子来说，我们再加两张图片（也许是在这张主照片之前和之后拍摄的照片）。
这是我的storyboard更新之后的样子：
我原本可以手动输入这些次级图片的宽高，但我没有，取而代之的是我让它们的尺寸变成主图片的某个比例。
这样做的好处是如果我们决定改变主图片的尺寸，布局的其他部分会自动的计算并且更新次级图片的宽高，而不用我们手动输入。
这是一张我截的图，我改变了主图片的宽度约束，可以看到其他的部分也随之更新了。
我没有在iPad模拟器上运行项目并截屏，不过这里有一些横屏和竖屏的效果图：
使用布局和间隔视图
Xcode中有些约束我们可以随时运用，但是对于一些些常见的布局，我们需要一点帮助。
布局视图样例
要把一个视图的边缘固定在父级视图的边缘，或者把它固定在父级视图的正中心是件很简单的事情，~~但是我没有发现简便的方法，让视图固定在离正中心有一段固定距离的地方。~~感谢Jeff Nouwen指出，在把视图固定在中间后，你可以改变constant值来达到你的期望。
理论上来说，我们需要的是一个‘ 中心排列导向’，即任何视图都能水平和垂直居中与父级视图中：
为了实现这个目标，通过现在我们可以使用的约束，我们把我们的视图嵌入一个外层视图（这个外层视图没有背景色，只是为了帮助我们布局而存在），可以把它定位在父级视图的中间。
通过这个方法，你的约束看起来可能像这样：
现在我比较喜欢让我的布局层级尽量平。另外一个不使用外层视图的方法，我叫它 布局视图。
使用这种方法，我倾向于在storyboard中添加一个颜色明亮的视图，然后把它的hidden属性设置为true，你仍然可以在storyboard布局中看到它（虽然稍稍渐隐），但是运行模拟器的时候它不会出现。
现在你在你的视图和布局视图中可以添加 居中排列（align center to center）。
间隔视图样例
之前我们看到了我们是如何固定视图边缘到父级视图边缘的间隙，使得当父级视图变大时，间隙约束也会让视图变大。
但是如果我们想要视图仍然保持原来的大小，在父级视图变大时，视图之间的间隙也变大呢？
理论上来说，我们想要某种类似 同等宽度约束的约束，只不过同等宽度约束是作用在视图上，我们想让它作用在约束上。
此时我们需要添加 间隔视图来帮助我们布局，但由于我们不想在运行app时看到它们，我们会把它们的hidden属性设置为true。
使用这项技术的方法，是为每一个你想要等比增长的间隙添加一个间隔视图，把其他视图的边缘固定在间隔视图的边缘上，然后为所有的间隔视图添加 同等宽度约束。
下一步
现在希望你们已经完全有信心开始探索应用约束的布局了。
不要指望能即刻成功，Xcode是一个非常复杂的工具，除了storyboard和约束之外它还有很多其他功能，有些功能刚开始使用会觉得很神秘和困惑。就像其他复杂的工具一样，在你熟悉它的怪癖之前你还需要一段适应时间，但是我建议你尽早的去熟悉它，因为我预计（至少我希望）下一代设计师会更多地使用Xcode这样的工具而非Photoshop。
如果你是一位创建设计规范的设计师，并想让IOS开发者遵循你的规范，你应该开始考虑和你的设计团队沟通的最好方法。也许你会创建一个视觉语言来描述你想要应用的约束。
我个人认为，设计师应该更多地承担一些他们创建工作上的责任，而不是让一个前端开发人员重新创建设计意图，而设计师只是管理storyboard文件。
如果你发现这个教程上有任何难以理解的地方，或者有错误的敌方，请让我知道，我会尽快更新这篇文章。
方法：
alert,对话框，OK按钮
confirm,对话框，OK和Cancel按钮
prompt,对话框，可输入
close，关闭当前浏览器窗口
navigate，在当前窗口中导航到指定的URL资源
setInterval，设置每隔一定时间调用指定程序代码，毫秒，setInterval("Func()",5000)
setTimeout,设置经过一定时间后执行一次指定程序代码，毫秒，setTimeout("Func()",5000)
clearInterval,
clearTimeout,
moveTo，将浏览器窗口移动到屏幕上的某个位置
resizeTo,改变浏览器窗口的大小
open，打开一个新窗口 window.open("abc.html","_blank","top=0,left=0,width=100,height=200,toolbar=no");
showModalDialog产生一个模态对话框
showModelessDialog产生一个非模态对话框窗口
属性：
closed
opener
defaultstatus
status
screenTop
screenLeft
事件：
onload,onunload,onmouseover,...
对象属性：
location对象：设置和返回当前网页的URL信息。
载入一个新的网页：window.location.href="http://g.cn";
刷新当前页：window.location.reload();
event对象：获取和设置当前事件的有关信息。
altKey属性，用于检测事件发生时Alt键是否被按下
ctrlKey。。。
shiftKey...
screenX,screenY设置和返回鼠标相对屏幕顶点的x,y坐标
offsetX,offsetY设置和返回鼠标相对事件源顶点的x,y坐标
x,y 设置和返回鼠标相对事件源的父元素顶点x,y坐标
returnValue设置和返回事件的返回值，一般情况下设置为false
cancelBubble设置和返回当前事件是否继续向下传递
srcElement设置和返回事件源对象
keyCode设置和返回键盘按下或弹起时的键的unicode码
button检索鼠标动作使用的是哪个按键，1左鍵，2右键，3左右同时
function window_onkeypress()
{
// alert(window.event.keyCode);
if(window.event.keyCode==27)
{
window.close();
}
}