每个画布都有两个尺寸，一个是 drawingbuffer 的尺寸， 这个表示画布中有多少个像素。另一是画布显示的尺寸， CSS决定画布显示的尺寸。
 
你可以通过两种方式设置画布的 drawingbuffer尺寸。一种是使用HTML:
 
另一种是使用JavaScript:
 
var canvas = document.getElementById("c");
 
canvas.width = 400;
 
canvas.height = 300;
 
如果我们在画布上绘制以一个单像素宽度的线，就会得到这样的结果:
 
"use strict";
 
function main() {
 
// Get A WebGL context
 
/** @type {HTMLCanvasElement} */
 
var canvas = document.getElementById("canvas");
 
var gl = canvas.getContext("webgl");
 
if (!gl) {
 
return;
 
}
 
// setup GLSL program
 
var program = webglUtils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
 
gl.useProgram(program);
 
// look up where the vertex data needs to go.
 
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
 
// lookup uniforms
 
var colorLocation = gl.getUniformLocation(program, "u_color");
 
var matrixLocation = gl.getUniformLocation(program, "u_matrix");
 
// Create a buffer to put three 2d clip space points in
 
var positionBuffer = gl.createBuffer();
 
// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
 
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
requestAnimationFrame(drawScene);
 
// Draw the scene.
 
function drawScene(now) {
 
now *= 0.001; // convert to seconds
 
// Tell WebGL how to convert from clip space to pixels
 
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
// Clear the canvas.
 
gl.clear(gl.COLOR_BUFFER_BIT);
 
// Tell it to use our program (pair of shaders)
 
gl.useProgram(program);
 
// Turn on the attribute
 
gl.enableVertexAttribArray(positionAttributeLocation);
 
// Bind the position buffer.
 
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
 
var size = 2; // 2 components per iteration
 
var type = gl.FLOAT; // the data is 32bit floats
 
var normalize = false; // don't normalize the data
 
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
 
var offset = 0; // start at the beginning of the buffer
 
gl.vertexAttribPointer(
 
positionAttributeLocation, size, type, normalize, stride, offset)
 
// Set Geometry.
 
var radius = Math.sqrt(gl.canvas.width * gl.canvas.width + gl.canvas.height * gl.canvas.height) * 0.5;
 
var angle = now;
 
var x = Math.cos(angle) * radius;
 
var y = Math.sin(angle) * radius;
 
var centerX = gl.canvas.width / 2;
 
var centerY = gl.canvas.height / 2;
 
setGeometry(gl, centerX + x, centerY + y, centerX - x, centerY - y);
 
// Compute the matrices
 
var projectionMatrix = m3.projection(gl.canvas.width, gl.canvas.height);
 
// Set the matrix.
 
gl.uniformMatrix3fv(matrixLocation, false, projectionMatrix);
 
// Draw in red
 
gl.uniform4fv(colorLocation, [1, 0, 0, 1]);
 
// Draw the geometry.
 
var primitiveType = gl.LINES;
 
var offset = 0;
 
var count = 2;
 
gl.drawArrays(primitiveType, offset, count);
 
requestAnimationFrame(drawScene);
 
}
 
}
 
// Fill the buffer with a line
 
function setGeometry(gl, x1, y1, x2, y2) {
 
gl.bufferData(
 
gl.ARRAY_BUFFER,
 
new Float32Array([
 
x1, y1,
 
x2, y2]),
 
gl.STATIC_DRAW);
 
}
 
main();
 
运行结果：
 

 
为什么它被模糊了？因为浏览器得到 10×15 像素的画布，将它拉伸到 400×300 像素， 然后在拉伸的过程中进行了插值。
 
假设我们想让画布填充满窗口该怎么做？首先使用CSS让浏览器将画布铺满窗口，例如：
 
/* 移除边界 */
 
body {
 
border: 0;
 
background-color: white;
 
}
 
/* 设置欢度大小为视域大小 */
 
canvas {
 
width: 100vw;
 
height: 100vh;
 
display: block;
 
}
 
现在只需要将 drawingbuffer 的尺寸设置为为浏览器拉伸后的画布尺寸。 我们可以使用 clientWidth 和 clientHeight 属性，这个属性是所有HTML元素都有的属性， 可以让JavaScript获取元素显示的尺寸。
 
function resize(canvas) {
 
// 获取浏览器中画布的显示尺寸
 
var displayWidth = canvas.clientWidth;
 
var displayHeight = canvas.clientHeight;
 
// 检尺寸是否相同
 
if (canvas.width != displayWidth ||
 
canvas.height != displayHeight) {
 
// 设置为相同的尺寸
 
canvas.width = displayWidth;
 
canvas.height = displayHeight;
 
}
 
}
 
大多数WebGL应用是变化的，所以我们需要在绘制之前调用这个方法调画布为期望的大小。
 
function drawScene() {
 
resize(gl.canvas);
 
...
 
运行下面的代码：
 
"use strict";
 
function main() {
 
// Get A WebGL context
 
/** @type {HTMLCanvasElement} */
 
var canvas = document.getElementById("canvas");
 
var gl = canvas.getContext("webgl");
 
if (!gl) {
 
return;
 
}
 
// setup GLSL program
 
var program = webglUtils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
 
gl.useProgram(program);
 
// look up where the vertex data needs to go.
 
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
 
// lookup uniforms
 
var colorLocation = gl.getUniformLocation(program, "u_color");
 
var matrixLocation = gl.getUniformLocation(program, "u_matrix");
 
// Create a buffer to put three 2d clip space points in
 
var positionBuffer = gl.createBuffer();
 
// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
 
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
requestAnimationFrame(drawScene);
 
// Draw the scene.
 
function drawScene(now) {
 
now *= 0.001; // convert to seconds
 
resize(gl.canvas);
 
// Clear the canvas.
 
gl.clear(gl.COLOR_BUFFER_BIT);
 
// Tell it to use our program (pair of shaders)
 
gl.useProgram(program);
 
// Turn on the attribute
 
gl.enableVertexAttribArray(positionAttributeLocation);
 
// Bind the position buffer.
 
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
 
var size = 2; // 2 components per iteration
 
var type = gl.FLOAT; // the data is 32bit floats
 
var normalize = false; // don't normalize the data
 
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
 
var offset = 0; // start at the beginning of the buffer
 
gl.vertexAttribPointer(
 
positionAttributeLocation, size, type, normalize, stride, offset)
 
// Set Geometry.
 
var radius = Math.sqrt(gl.canvas.width * gl.canvas.width + gl.canvas.height * gl.canvas.height) * 0.5;
 
var angle = now;
 
var x = Math.cos(angle) * radius;
 
var y = Math.sin(angle) * radius;
 
var centerX = gl.canvas.width / 2;
 
var centerY = gl.canvas.height / 2;
 
setGeometry(gl, centerX + x, centerY + y, centerX - x, centerY - y);
 
// Compute the matrices
 
var projectionMatrix = m3.projection(gl.canvas.width, gl.canvas.height);
 
// Set the matrix.
 
gl.uniformMatrix3fv(matrixLocation, false, projectionMatrix);
 
// Draw in red
 
gl.uniform4fv(colorLocation, [1, 0, 0, 1]);
 
// Draw the geometry.
 
var primitiveType = gl.LINES;
 
var offset = 0;
 
var count = 2;
 
gl.drawArrays(primitiveType, offset, count);
 
requestAnimationFrame(drawScene);
 
}
 
function resize(canvas) {
 
// Lookup the size the browser is displaying the canvas.
 
var displayWidth = canvas.clientWidth;
 
var displayHeight = canvas.clientHeight;
 
// Check if the canvas is not the same size.
 
if (canvas.width != displayWidth ||
 
canvas.height != displayHeight) {
 
// Make the canvas the same size
 
canvas.width = displayWidth;
 
canvas.height = displayHeight;
 
}
 
}
 
}
 
// Fill the buffer with a line
 
function setGeometry(gl, x1, y1, x2, y2) {
 
gl.bufferData(
 
gl.ARRAY_BUFFER,
 
new Float32Array([
 
x1, y1,
 
x2, y2]),
 
gl.STATIC_DRAW);
 
}
 
main();
 

 
哪里出问题了？为什么这个线没有覆盖整个区域？
 
原因是当我们重置画布尺寸的时候还需要调用gl.viewport设置视域， gl.viewport告诉WebGL如何将裁剪空间(-1 到 +1)中的点转换到像素空间， 也就是画布内。当你第一次创建WebGL上下文的时候WebGL会设置视域大小和画布大小匹配， 但是在那之后就需要你自己设置。当你改变画布大小就需要告诉WebGL新的视域设置。
 
让我们来修改代码处理这个问题。由于WebGL上下文引用了画布，所以直接传递它的尺寸。
 
function drawScene() {
 
resize(gl.canvas);
 
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
...
 
运行下面的代码：
 
"use strict";
 
function main() {
 
// Get A WebGL context
 
/** @type {HTMLCanvasElement} */
 
var canvas = document.getElementById("canvas");
 
var gl = canvas.getContext("webgl");
 
if (!gl) {
 
return;
 
}
 
// setup GLSL program
 
var program = webglUtils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
 
gl.useProgram(program);
 
// look up where the vertex data needs to go.
 
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
 
// lookup uniforms
 
var colorLocation = gl.getUniformLocation(program, "u_color");
 
var matrixLocation = gl.getUniformLocation(program, "u_matrix");
 
// Create a buffer to put three 2d clip space points in
 
var positionBuffer = gl.createBuffer();
 
// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
 
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
requestAnimationFrame(drawScene);
 
// Draw the scene.
 
function drawScene(now) {
 
now *= 0.001; // convert to seconds
 
resize(gl.canvas);
 
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
// Clear the canvas.
 
gl.clear(gl.COLOR_BUFFER_BIT);
 
// Tell it to use our program (pair of shaders)
 
gl.useProgram(program);
 
// Turn on the attribute
 
gl.enableVertexAttribArray(positionAttributeLocation);
 
// Bind the position buffer.
 
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
 
var size = 2; // 2 components per iteration
 
var type = gl.FLOAT; // the data is 32bit floats
 
var normalize = false; // don't normalize the data
 
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
 
var offset = 0; // start at the beginning of the buffer
 
gl.vertexAttribPointer(
 
positionAttributeLocation, size, type, normalize, stride, offset)
 
// Set Geometry.
 
var radius = Math.sqrt(gl.canvas.width * gl.canvas.width + gl.canvas.height * gl.canvas.height) * 0.5;
 
var angle = now;
 
var x = Math.cos(angle) * radius;
 
var y = Math.sin(angle) * radius;
 
var centerX = gl.canvas.width / 2;
 
var centerY = gl.canvas.height / 2;
 
setGeometry(gl, centerX + x, centerY + y, centerX - x, centerY - y);
 
// Compute the matrices
 
var projectionMatrix = m3.projection(gl.canvas.width, gl.canvas.height);
 
// Set the matrix.
 
gl.uniformMatrix3fv(matrixLocation, false, projectionMatrix);
 
// Draw in red
 
gl.uniform4fv(colorLocation, [1, 0, 0, 1]);
 
// Draw the geometry.
 
var primitiveType = gl.LINES;
 
var offset = 0;
 
var count = 2;
 
gl.drawArrays(primitiveType, offset, count);
 
requestAnimationFrame(drawScene);
 
}
 
function resize(canvas) {
 
// Lookup the size the browser is displaying the canvas.
 
var displayWidth = canvas.clientWidth;
 
var displayHeight = canvas.clientHeight;
 
// Check if the canvas is not the same size.
 
if (canvas.width != displayWidth ||
 
canvas.height != displayHeight) {
 
// Make the canvas the same size
 
canvas.width = displayWidth;
 
canvas.height = displayHeight;
 
}
 
}
 
}
 
// Fill the buffer with a line
 
function setGeometry(gl, x1, y1, x2, y2) {
 
gl.bufferData(
 
gl.ARRAY_BUFFER,
 
new Float32Array([
 
x1, y1,
 
x2, y2]),
 
gl.STATIC_DRAW);
 
}
 
main();
 

 
在窗口中打开，改变窗口大小，发现它总是填满窗口。
 
我知道你会问，为什么WebGL不在画布尺寸改变的时候自动帮我们修改视域？ 原因是它不知道你如何以及为什么使用视域， 你可以渲染到一个帧缓冲或者做其他的事情需要不同的视域尺寸。 WebGL没办法知道你的意图所以就不能自动帮你设置视域。
 
如果你看了很多WebGL应用他们处理或者设置画布尺寸有很多不同的方式， 如果你好奇的话这里有一些我认为比较合适的方式。
 
对于 Retina 或 HD-DPI 该怎么办？
 
当你使用CSS像素值声明画布的尺寸时，这个叫做CSS像素值，可能不是真实像素值。 大多数现代智能手机有叫做高清显示(HD-DPI)或者苹果叫它“Retina Display”的特性。 对于文字和大多数CSS样式浏览器会自动绘制HD-DPI图形，但是对于WebGL， 由于你来控制绘制图形，所以取决于你想绘制一般分辨率还是“HD-DPI”品质。
 
为了实现这个我们需要获得window.devicePixelRatio的值， 这个值告诉我们1个CSS像素对应多少个实际像素。 我们可以修改 resize 方法处理这种情况。
 
function resize(gl) {
 
var realToCSSPixels = window.devicePixelRatio;
 
// 获取浏览器显示的画布的CSS像素值
 
// 然后计算出设备像素设置drawingbuffer
 
var displayWidth = Math.floor(gl.canvas.clientWidth * realToCSSPixels);
 
var displayHeight = Math.floor(gl.canvas.clientHeight * realToCSSPixels);
 
// 检查画布尺寸是否相同
 
if (gl.canvas.width !== displayWidth ||
 
gl.canvas.height !== displayHeight) {
 
// 设置为相同的尺寸
 
gl.canvas.width = displayWidth;
 
gl.canvas.height = displayHeight;
 
}
 
}
 
如果你有一个HD-DPI显示器，例如在智能手机上浏览这个网页的话， 你就会发现下面的线要比之前的线，也就是没有对HD-DPI做调整的线要细一些。
 
是否需要根据HD-DPI做调整取决于你自己。 在 iPhone4 或 iPhone5 上 window.devicePixelRatio 的值是 2, 意味着你要绘制 4 倍的像素个数。我确定在 iPhone6Plus 上那个值是 3， 意味着 9 倍的像素个数。这样就会拖慢你的应用， 实际上在游戏中常用的优化是绘制比显示数量要小的像素个数， 让GPU缩放它们。这其实取决于你的目的，如果你想绘制用于打印的图形， 你可能希望支持 HD-DPI，如果你想做一个游戏想给用户多种选择， 让他们根据自己的机器调整配置，控制显示分辨率。

 
 
 PhotoShop画布自动适应图像的尺寸大小？
 
 困扰很久，感谢百度用户“季末杀手”的帮助。问题如下：
 
 图像剪切后比画布小多了，用调整画布大小的形式输入数据太慢，有次见人一下就把画布自动调到图像的尺寸了。如图
 
 在贴吧问了，有了答案这里留一下：把背景透明然后在菜单处点“图像 →裁切”
 
 选择“透明像素”
 
 确定即可。如果常用的话，可以录制一个动作，设置快捷键就方便了。
 
 

原文链接：http://shuaihua.cc/blog/20150311.php
 
 
 阳光美美哒~
 
 啊，首先要在HTML中新增一个canvas标签，然后给他一个身份证号，噗~就是id啦~
 
<canvas id="canvas"><⁄canvas>
 
 之后在JavaScript中获取canvas这个DOM对象并进行一系列属性操作
 
//首先生命一个变量，我用来存放canvas画布的基本信息
var canvas_info = {
    "width":window.innerWidth,
    "height":window.innerHeight,
    "ratio":window.devicePixelRatio
};
//获取canvas DOM对象
var canvas = document.getElementById("canvas");
//获取canvas对象的2d上下文并复制给ctx这个变量，绘图部分基本上都是使用ctx这个上下文中的各种属性和方法。
var ctx = canvas.getContext("2d");
//设置画布的宽和高的CSS样式。
canvas.style.width = canvas_info.width + "px";
canvas.style.height = canvas_info.height + "px";
//为了适配不同设备的屏幕，需要将CSS样式里设置的宽高乘以设备的像素比，并将值设置给canvas画布的实际宽高，这样在某些设备中canvas画布内绘制的图像才不会出现放大失真的现象。
canvas.width = canvas_info.width * ratio;
canvas.height = canvas_info.height * ratio;
 
 这一切都准备就绪之后，接下来我会列出几乎所有的canvas的2d上下文中的属性和方法，会提到如何设置或获取属性和使用方法！~~
 
 其实一个很重要的学习各种API的方法就是将这个API实例化之后在控制台输出，这个对象的各种属性和方法都能找到。
 
//在控制台输出canvas的2d上下文ctx
console.log(ctx);
 
 之后就逐个击破，逐个学习，综合运用~~
 
↓↓ 设置上下文的填充样式，值可以是CSS颜色，渐变对象，pattern对象 ↓↓
ctx.fillStyle = "#00ff00";

↓↓ 设置或返回用于笔触的颜色、渐变或模式 ↓↓
ctx.strokeStyle = "#00f";

↓↓ 设置或返回用于阴影的颜色 ↓↓
ctx.shadowColor = "#00f";

↓↓ 设置或返回用于阴影的模糊级别 ↓↓
ctx.shadowBlur = 20;

↓↓ 设置或返回阴影距形状的水平距离 ↓↓
ctx.shadowOfsetX = 20;

↓↓ 设置或返回阴影距形状的垂直距离 ↓↓
ctx.shadowOfsetY = 20;

↓↓ 设置或返回字体属性，值内的顺序不能混乱 ↓↓
ctx.font = "italic small-caps bold 10px 微软雅黑";

↓↓ 设置或返回绘图的当前 alpha 或透明值 ↓↓
ctx.globalAlpha = 1;

↓↓ 设置或返回新图像的覆盖方式 ↓↓
//新绘制的覆盖在已有的之上
ctx.globalCompositeOperation = "source-over";
//已有的覆盖在新绘制的之上
ctx.globalCompositeOperation = "destination-ove";

↓↓ 设置上下文中的图像是否自动平滑处理，消除马赛克，默认为true ↓↓
ctx.imageSmoothingEnabled = true;

↓↓ 线段端点的形状，默认为“butt”为平直的边缘/圆形线帽"round"/正方形线帽"square"， ↓↓
ctx.lineCap = "butt";

↓↓ 设置或返回两条线相交时，所创建的拐角类型，包括bevel（斜角）round（圆角）miter（尖角） ↓↓
ctx.lineJoin = "butt";

↓↓ 设置或返回当前的线条宽度 ↓↓
ctx.lineWidth = 3;

↓↓ 设置或返回最大斜接长度 ↓↓
ctx.miterLimit = 3;

↓↓ 设置或返回文本内容的当前对齐方式 ↓↓
ctx.textAlign = "center|end|left|right|start";

↓↓ 设置或返回在绘制文本时使用的当前文本基线 ↓↓
ctx.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom";

↓↓ 返回 ImageData 对象的宽度 ↓↓
console.log(ctx.width);

↓↓ 设置或返回 ImageData 对象的高度 ↓↓
console.log(ctx.height);

↓↓ 返回一个对象，其包含指定的 ImageData 对象的图像数据 ↓↓
console.log(ctx.data);

↓↓ 返回一个对象，其包含指定的 ImageData 对象的图像数据 ↓↓
console.log(ctx.data);

//----------------------------

↓↓ 保存当前环境的状态 ↓↓
ctx.save();

↓↓ 返回之前保存过的路径状态和属性 ↓↓
ctx.restore();

↓↓ 创建新的、空白的 ImageData 对象，参数为宽和高 ↓↓
ctx.createImageData(100,100);

↓↓ 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 ↓↓
ctx.getImageData(10,10,100,100);

↓↓ 把图像数据（从指定的 ImageData 对象）放回画布上 ↓↓
ctx.putImageData(imgData,10,70);

↓↓ 向画布上绘制图像、画布或视频 ↓↓
ctx.drawImage(img,0,0,100,100);

↓↓ 在画布上绘制“被填充的”文本 ↓↓
ctx.fillText("Hello World!",100,100);

↓↓ 在画布上绘制文本（无填充） ↓↓
ctx.strokeText("Hello World!",100,100);

↓↓ 返回包含指定文本宽度的对象 ↓↓
ctx.measureText(txt).width;

↓↓ 缩放当前绘图至更大或更小 ↓↓
ctx.scale(2,2);

↓↓ 旋转当前绘图 ↓↓
ctx.rotate(20*Math.PI/180);

↓↓ 重新映射画布上的 (0,0) 位置 ↓↓
ctx.translate(100,100);

↓↓ 替换绘图的当前转换矩阵 ↓↓
ctx.transform(1,0.5,-0.5,1,30,10);

↓↓ 将当前转换重置为单位矩阵。然后运行 transform() ↓↓
ctx.setTransform(1,0.5,-0.5,1,30,10);

↓↓ 填充当前绘图（路径） ↓↓
ctx.fill();

↓↓ 绘制已定义的路径 ↓↓
ctx.stroke();

↓↓ 起始一条路径，或重置当前路径 ↓↓
ctx.beginPath();

↓↓ 把路径移动到画布中的指定点，不创建线条 ↓↓
ctx.moveTo(30,30);

↓↓ 创建从当前点回到起始点的路径 ↓↓
ctx.closePath();

↓↓ 添加一个新点，然后在画布中创建从该点到最后指定点的线条 ↓↓
ctx.lineTo(100,100);

↓↓ 从原始画布剪切任意形状和尺寸的区域 ↓↓
ctx.clip();

↓↓ 创建二次贝塞尔曲线 ↓↓
ctx.quadraticCurveTo();

↓↓ 创建弧/曲线（用于创建圆形或部分圆） ↓↓
ctx.arc();

↓↓ 创建两切线之间的弧/曲线 ↓↓
ctx.arcTo();

↓↓ 如果指定的点位于当前路径中，则返回 true，否则返回 false ↓↓
ctx.isPointInPath();

↓↓ 创建矩形 ↓↓
ctx.rect();

↓↓ 绘制“被填充”的矩形 ↓↓
ctx.fillRect();

↓↓ 绘制矩形（无填充） ↓↓
ctx.strokeRect();

↓↓ 在给定的矩形内清除指定的像素 ↓↓
ctx.clearRect();

↓↓ 创建线性渐变（用在画布内容上） ↓↓
ctx.createLinearGradient();

↓↓ 在指定的方向上重复指定的元素 ↓↓
ctx.createPattern();

↓↓ 创建放射状/环形的渐变（用在画布内容上） ↓↓
ctx.createRadialGradient();

↓↓ 规定渐变对象中的颜色和停止位置 ↓↓
ctx.addColorStop();
 

 
原文链接：http://shuaihua.cc/blog/20150311.php
 

先来看看各种iPhone的尺寸和分辨率，这张图写的很清楚。

设备名称
屏幕尺寸
PPI
Asset
竖屏点（point）
竖屏分辨率（px）
iPhone X
5.8 in
458
@3x
375 x 812
1125 x 2436
iPhone 8+, 7+, 6s+, 6+
5.5 in
401
@3x
414 x 736
1242 x 2208
iPhone 8, 7, 6s, 6
4.7 in
326
@2x
375 x 667
750 x 1334
iPhone SE, 5, 5S, 5C
4.0 in
326
@2x
320 x 568
640 x 1136
iPhone 4, 4S
3.5 in
326
@2x
320 x 480
640 x 960
iPhone 1, 3G, 3GS
3.5 in
163
@1x
320 x 480
320 x 480
iPad Pro 12.9
12.9 in
264
@2x
1024 x 1366
2048 x 2732
iPad Pro 10.5
10.5 in
264
@2x
834 x 1112
1668 x 2224
iPad Pro, iPad Air 2, Retina iPad
9.7 in
264
@2x
768 x 1024
1536 x 2048
iPad Mini 4, iPad Mini 2
7.9 in
326
@2x
768 x 1024
1536 x 2048
iPad 1, 2
9.7 in
132
@1x
768 x 1024
768 x 1024

 

 

 

 
最新设计指南推荐：
为iPhone X设计， iOS 11设计指南
iOS 11 设计中值得关注的 UI 设计细节
「译」苹果官方 iPhone X 人机界面指南
手把手教你如何适配 iPhone X
从iOS 11看怎样设计APP图标
iOS 11 vs 10: UI和交互全面对比分析
最新版IOS 11设计规范，官方源文件下载！
facebook出品的iOS 10 GUI (iPhone)源文件
虽然现在出来了Iphone X ，但是我们在工作中还是会按照750*1134来设计，虎哥总结一个精简版的设计流程方法，按这个做法就可以展开工作。
以PS工具设计IOS界面。
画布尺寸：
新建750×1334  分辨率72，像素/英寸。
 
常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
 
字体：
中文用苹方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。

app所用的字体大礼包下载（虎哥整理的）
 
ios开发里单位是pt
750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。
 
界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。
 
界面上的间距和元素尺寸：
以偶数为单位，不清楚的可以截图量大公司的APP界面作为参考。
750 x 1334 设计稿尺寸：
状态栏高度：40 px
导航栏高度：88 px
标签栏高度：98 px
 
设计稿实时预览：
安装一个Ps Mirror可以在iphone上实时观看效果。
 
标注工具：
蓝湖
马克鳗
PxCook 像素大厨
Parker标
一键标注神器－zeplin
 
界面的图标切图：
用Cutterman选中@2x @3x导出。

 
启动图标：
做1024×1024尺寸，一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

 
交接给程序：
最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。
 
引导页：
值得注意的是引导页切图需要单独设计多套（640×1136、750×1334、1125×2436、1242×2208）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。
 
适配方法3个原则：（不清楚的在网站搜索适配2字）
文字流式
控件弹性
图片等比缩放
 
测试界面：
程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。
 
干货资料：

facebook出品的iOS 10 GUI (iPhone)源文件
可以看看下面这几篇文章：
      
      
三分钟搞清iPhone X 设计尺寸和适配
移动端界面设计之尺寸篇（淘宝版）
iPhone6 & 6 Plus 视觉设计适配说明
新手福利！超全面的UI设计切图规范
UI适配攻略·教程④一稿配双平台
h5移动端页面设计学习文档
Dribbble 2016十大设计趋势总结
图标设计的三个小原则
新设计趋势来临，解读 iOS 10 设计指南
一份详尽全面的UI设计字体与排版指南
 
以PS工具设计安卓界面。
画布尺寸：
如果想一稿适配ios，那就新建720×1280  分辨率72，像素/英寸。
如果单独设计安卓MD新规范的，那就新建1080×1920  分辨率72，像素/英寸。
 
720×1280常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
 
字体：
中文用Noto/思源黑体（是一个字体，叫法不同而已），英文用Roboto。

app所用的字体大礼包下载（虎哥整理的）
 
单位换算
距离单位是DP
文字单位是SP

720×1280尺寸的换算关系 1dp=2px，文字1sp=2px。也就是说程序员拿到我们的px单位的标注稿，自己除以2就是dp和sp了。
1080×1920尺寸就是1dp=3px，文字1sp=3px
 
界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。


移动端界面设计之尺寸篇（淘宝版）
 
界面上的间距和元素尺寸：
最新规范MD的做法：
8dp原则   栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。
 
常见一般常用做法：
直接把ios的设计稿照搬过来，只不过状态栏，导航栏，标签栏按照安卓的来。
720 x 1280 设计稿尺寸：
状态栏高度：50 px
导航栏高度：96 px
标签栏高度：96 px
 
设计稿实时预览：
安装一个Ps Mirror可以在安卓手机上实时观看效果。
 
标注工具：
马克鳗
PxCook 像素大厨
Parker标
一键标注神器－zeplin
标注的时候，如果是720×1280尺寸设计的，就选对应的xhdpi，如果是1080×1920尺寸设计的，就选对应的xxhdpi。
界面的图标切图：
用Cutterman选中下面所示，根据需要选择不同分辨率的导出。

 
界面中重复利用的资源切图需要做成点9图片：
 
主要是一些按钮，单色或半透明的背景块。图标不用做点9。
 
启动图标：
做1024×1024尺寸，安卓对图标的样式没有要求，你可以做各种形状都行，一般做方形无圆角的，各家手机厂商的定制系统会自己加圆角。
然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。
 
交接给程序：
最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。
 
引导页：
值得注意的是引导页切图需要单独设计多套（480×800、720×1280、1080×1920）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。
 
适配方法3个原则：（不清楚的在网站搜索适配2字）
文字流式
控件弹性
图片等比缩放
 
测试界面：
程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。
 
干货资料：

 
可以看看下面这几篇文章：
安卓1080P界面设计规范解读
6个技巧帮你把IOS的UI转换成安卓！
Material Design 安卓5.1L （UI kit包下载！）
天天喊着学UI,知道安卓和iOS的区别吗?
UI设计师不可不知的安卓屏幕知识
最后说句：“对界面上的字号，间距不清楚的，多动手去截图，量一量优秀APP界面，多分析找规律。”
 
虎哥整理。
2016年12月10日更新。