精华内容
下载资源
问答
  • 每个画布都有两个尺寸,一个是 drawingbuffer 的尺寸, 这个表示画布中有多少个像素。另一是画布显示的尺寸, CSS决定画布显示的尺寸。你可以通过两种方式设置画布的 drawingbuffer尺寸。一种是使用HTML:另一种是...

    每个画布都有两个尺寸,一个是 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();

    运行结果:

    7deaebe5b6ad0cbcdc2548c7be9033b7.png

    为什么它被模糊了?因为浏览器得到 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();

    e5a462d4a4b7d0f00b604c4537773e85.png

    哪里出问题了?为什么这个线没有覆盖整个区域?

    原因是当我们重置画布尺寸的时候还需要调用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();

    26c05dc7bd7dbc229aff60b8c29c5d49.png

    在窗口中打开,改变窗口大小,发现它总是填满窗口。

    我知道你会问,为什么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画布自动适应图像的尺寸大小? 困扰很久,感谢百度用户“季末杀手”的帮助。问题如下: 图像剪切后比画布小多了,用调整画布大小的形式输入数据太慢,有次见人一下就把画布自动调到图像的尺寸了。如...

    PhotoShop画布自动适应图像的尺寸大小?

    困扰很久,感谢百度用户“季末杀手”的帮助。问题如下:

    图像剪切后比画布小多了,用调整画布大小的形式输入数据太慢,有次见人一下就把画布自动调到图像的尺寸了。如图

    在贴吧问了,有了答案这里留一下:把背景透明然后在菜单处点“图像 →裁切”

    选择透明像素

    确定即可。如果常用的话,可以录制一个动作,设置快捷键就方便了。

    展开全文
  • 原文链接:http://shuaihua.cc/blog/20150311.php 阳光美美哒~ ...之后在JavaScript中获取canvas这个DOM对象并进行一系列属性操作 ...//首先生命一个变量,我用来存放canvas画布的基本信息 var canvas_info = {

    原文链接: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

    展开全文
  • UI 设计常用尺寸规格

    千次阅读 2018-05-04 17:23:37
    先来看看各种iPhone的尺寸和分辨率,这张图写的很清楚。设备名称屏幕尺寸PPIAsset竖屏点(point)竖屏分辨率(px)iPhone X5.8 in458@3x375 x 8121125 x 2436iPhone 8+, 7+, 6s+, 6+5.5 in401@3x414 x 7361242 x ...

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

    chicun

    设备名称屏幕尺寸PPIAsset竖屏点(point)竖屏分辨率(px)
    iPhone X5.8 in458@3x375 x 8121125 x 2436
    iPhone 8+, 7+, 6s+, 6+5.5 in401@3x414 x 7361242 x 2208
    iPhone 8, 7, 6s, 64.7 in326@2x375 x 667750 x 1334
    iPhone SE, 5, 5S, 5C4.0 in326@2x320 x 568640 x 1136
    iPhone 4, 4S3.5 in326@2x320 x 480640 x 960
    iPhone 1, 3G, 3GS3.5 in163@1x320 x 480320 x 480
    iPad Pro 12.912.9 in264@2x1024 x 13662048 x 2732
    iPad Pro 10.510.5 in264@2x834 x 11121668 x 2224
    iPad Pro, iPad Air 2, Retina iPad9.7 in264@2x768 x 10241536 x 2048
    iPad Mini 4, iPad Mini 27.9 in326@2x768 x 10241536 x 2048
    iPad 1, 29.7 in132@1x768 x 1024768 x 1024

    ultimate-guide-to-iphone-resolutions

     

    iPhone-X-Screen-Demystified

     

    iPhoneX-Portrait

     

    2-(1)Design-Colors

     

    最新设计指南推荐:

    1. 为iPhone X设计, iOS 11设计指南
    2. iOS 11 设计中值得关注的 UI 设计细节
    3. 「译」苹果官方 iPhone X 人机界面指南
    4. 手把手教你如何适配 iPhone X
    5. 从iOS 11看怎样设计APP图标
    6. iOS 11 vs 10: UI和交互全面对比分析
    7. 最新版IOS 11设计规范,官方源文件下载!
    8. 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代替。

    zitibao

    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上实时观看效果。

     

    标注工具:

    1. 蓝湖
    2. 马克鳗
    3. PxCook 像素大厨
    4. Parker标
    5. 一键标注神器-zeplin

     

    界面的图标切图:

    Cutterman选中@2x @3x导出。

    sample1

     

    启动图标:

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

    Design-IconGridDesign-RoundedCorners

     

    交接给程序:

    最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。

     

    引导页:

    值得注意的是引导页切图需要单独设计多套(640×1136、750×1334、1125×2436、1242×2208)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。

     

    适配方法3个原则:(不清楚的在网站搜索适配2字)

    1. 文字流式
    2. 控件弹性
    3. 图片等比缩放

     

    测试界面:

    程序实现DEMO版本以后,咱们要在测试机上好好检查下界面问题,及时跟程序沟通并更改。

     

    干货资料:

    ios10

    facebook出品的iOS 10 GUI (iPhone)源文件

    可以看看下面这几篇文章:

          

          

    1. 三分钟搞清iPhone X 设计尺寸和适配
    2. 移动端界面设计之尺寸篇(淘宝版)
    3. iPhone6 & 6 Plus 视觉设计适配说明
    4. 新手福利!超全面的UI设计切图规范
    5. UI适配攻略·教程④一稿配双平台
    6. h5移动端页面设计学习文档
    7. Dribbble 2016十大设计趋势总结
    8. 图标设计的三个小原则
    9. 新设计趋势来临,解读 iOS 10 设计指南
    10. 一份详尽全面的UI设计字体与排版指南

     

    以PS工具设计安卓界面。

    画布尺寸:

    如果想一稿适配ios,那就新建720×1280  分辨率72,像素/英寸。

    如果单独设计安卓MD新规范的,那就新建1080×1920  分辨率72,像素/英寸。

     

    720×1280常见的字体大小:

    24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。

     

    字体:

    中文用Noto/思源黑体(是一个字体,叫法不同而已),英文用Roboto。

    zitibao

    app所用的字体大礼包下载(虎哥整理的)

     

    单位换算

    距离单位是DP

    文字单位是SP

    gongshi

    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可以在安卓手机上实时观看效果。

     

    标注工具:

    1. 马克鳗
    2. PxCook 像素大厨
    3. Parker标
    4. 一键标注神器-zeplin

    标注的时候,如果是720×1280尺寸设计的,就选对应的xhdpi,如果是1080×1920尺寸设计的,就选对应的xxhdpi。

    界面的图标切图:

    Cutterman选中下面所示,根据需要选择不同分辨率的导出。

    anzhuo

     

    界面中重复利用的资源切图需要做成点9图片:

     

    主要是一些按钮,单色或半透明的背景块。图标不用做点9。

     

    启动图标:

    做1024×1024尺寸,安卓对图标的样式没有要求,你可以做各种形状都行,一般做方形无圆角的,各家手机厂商的定制系统会自己加圆角。

    然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

     

    交接给程序:

    最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。

     

    引导页:

    值得注意的是引导页切图需要单独设计多套(480×800、720×1280、1080×1920)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。

     

    适配方法3个原则:(不清楚的在网站搜索适配2字)

    1. 文字流式
    2. 控件弹性
    3. 图片等比缩放

     

    测试界面:

    程序实现DEMO版本以后,咱们要在测试机上好好检查下界面问题,及时跟程序沟通并更改。

     

    干货资料:

    mdzhinan

     

    可以看看下面这几篇文章:

    1. 安卓1080P界面设计规范解读
    2. 6个技巧帮你把IOS的UI转换成安卓!
    3. Material Design 安卓5.1L (UI kit包下载!)
    4. 天天喊着学UI,知道安卓和iOS的区别吗?
    5. UI设计师不可不知的安卓屏幕知识

    最后说句:“对界面上的字号,间距不清楚的,多动手去截图,量一量优秀APP界面,多分析找规律。”

     

    虎哥整理。

    2016年12月10日更新。

    展开全文
  • Android 常用图标尺寸及设计规范汇总

    万次阅读 2017-09-18 09:26:16
    若新建画布时,将画布分辨率设为144ppi,则1pt=2px=1dp。此时,即可将pt等同于dp。标注长度的时候, 将长度像素除以2即为dp值 。 PS:在photoshop cc中切图时,可直接在.png 图片图层名称前加上200%获得2倍大小的...
  • 画布canvas

    2018-01-18 17:13:12
    1.简介 canvas是HTML5新增的一个标签,主要在页面上显示一块区域,但是这块区域有别其他框架标签,它表现为一块可以绘制图形的画布,结合...2. canvas常用的基本方法 save():保存当前环境的状态 restore(): 返
  • 摘要 在 Cocos Creator 中,cocos ... 在cocos 中 原则:横屏游戏选FitHeight,竖屏游戏选FitWidth 适配方案 横屏 竖屏 同时,画布内的所有节点通过Widget组件进行相对布局即可 结语: 欢迎加入微信群一起学习讨论!
  • 基本概念 屏幕尺寸指实际的物理尺寸,为屏幕对角线的测量。单位in(英寸)像素(PX)代表屏幕上一个物理的像素点。屏幕密度density为解决Android 设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上...
  • 画布和绘图

    2017-08-02 12:12:35
    画布和绘图 Android框架提供了一套二维绘图API,可让您将自己的自定义图形渲染到画布上或修改现有视图以自定义其外观。您通常以下列方式之一绘制2-D图形: a.在布局中的View对象上绘制图形或动画。 通过使
  • Android 画布

    2021-06-15 19:27:34
    但是最好自己可以回收下) isRecycle:当前Bitmap是否被回收 setDensity、getDensity:设置当前Bitmap的dpi和获取当前Bitmap的dpi 注意此处设置Density Bitmap是只有发生尺寸变化,不会发生像素变化,而在...
  • Android UI设计常用尺寸及基本知识

    千次阅读 2016-06-25 17:04:32
    屏幕尺寸 指实际的物理尺寸,为屏幕对角线的测量。 为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。 像素(PX) 代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。 屏幕...
  • 直接在html标签中设置width和height属性或者使用JavaScript也可以改变画布尺寸,这个时候就不是缩放画布了,而是真正的改变了画布内的像素大小。 ???? 例子 ???? 改变canvas大小,画布会变空白的原因
  • 在本教程中,我们将遍历四种模式的变体,其中导航和页面内容置于画布之外,以节省空间,直到请求。 是时候停止复制和粘贴了,让我们开始理解! 回顾一下,本系列文章的第一个重点是导航保留在标题中的模式。 第二...
  • HTML5 Canvas 画布

    2020-02-21 17:18:52
    HTML5 Canvas 画布 什么是Canvas  Canvas 是 HTML5 新推出的元素标签,用户图形绘制。  和所有 DOM 元素一样,拥有自己的属性、方法和事件,其中包含绘图的方法。  通过 JavaScript 脚本可以调用绘图 API 在...
  • 【canvas 图形画布标签】(使用详解)

    千次阅读 2019-05-23 23:22:06
    canvas 图形画布标签1. 如何定义一个 图形画布 ?1.1 canvas 图形画布 标签的属性 有哪些 ?1.2 canvas 图形画布的 基本用法 有哪些 ?1.3 如何使用 canvas 图形画布 标签 来绘制图形 ?1.3.1 画布栅格和坐标空间1.3.2 ...
  • 使用Camtasia录制的视频可以很好的贴合画布,但若从外部导入视频,可能不能适应画布大小,下面我将使用Camtasia 2020(Win版)来为大家介绍如何使视频适应画布。 camtasia免费版下载:https://sourl.cn/q3nnR8 一、...
  • 画布元素总结

    2019-06-19 16:39:27
    是定义一块画布,我们必须利用js脚本在这个画布上操作绘画,比如画个折线图等 想要操作画布需要先获取HTML文档里面的画布故需要给<canvas>设置一个ID属性通过 var c=document.getEllementById("idname') ...
  • 教程:GIMP中改变画布大小

    千次阅读 2019-04-28 13:28:19
    在GIMP中,一个常用的操作就是:需要在不做缩放的情况下对图像进行扩展(或裁剪),即将画布增大(或缩小)。以下为教程。 注:完成以下教程时,使用的软件版本为 GIMP 2.10.8。 注:如果目的是要将图像进行裁剪(即缩小...
  • 这一节学习一下如何新建画布。首先,什么是画布?ps如何新建画布?ps如何新建画布? 字面意思理解就是画画用到的布。很正确,新建画布,就是重新建立一张绘画的布,...宽度和高度是我们新建画布尺寸,需要根据...
  • 比如某个文字大小在720×1280(xhdpi)的PS画布中是24px,320dpi/160dpi=2,即2倍的关系,那么告诉工程师,这个文字大小是12sp。 注意,图标资源一定要放到屏幕实际对应的dpi目录中去,否则实际显示可能会偏大或者...
  • 常用1寸、2寸照片标准尺寸

    千次阅读 2014-10-09 13:36:26
    1、 一寸照片的尺寸2.5*3.5cm 像素413*295 2、
  •  canvas也被叫做画布,是在JavaScript中完成网页图像制作的一个重要的途径,画布是一个矩形区域,在这个矩形区域中你可以利用好这里的每一个像素。同样在canvas中也有着别样的,快捷的,多种多样的绘制路径、矩形、...
  • 除了重写onDraw()、dispatchDraw()函数,还可以通过以下方法获得画布: ●通过Bitmap创建。 ●通过SurfaceView的SurfaceHolder.lockCanvas()函数获取。 另外,通过创建Drawable对象,然后将画好的Drawable对象画...
  • Bootstrap旨在通过提供一些常用的Web组件来满足许多情况。 有按钮,响应式导航栏,选项卡,工具提示,轮播等。 即使Bootstrap提供了所有玩具,它仍然缺少一种非常流行的模式:离画布导航。 这种导航方法将菜单从...
  • 画布组件,默认尺寸宽度300px 高度225px,常用属性: ps:同一页面的canvas-id不可重复,若使用一个已经出现过的canvas-id,它对应的画布将被隐藏且不再正常工作 <canvas>组件声明后,一个简单的画图...
  • 第一个参数RenderMode的渲染模式有三种:... Screen Space-Overlay(屏幕控件-覆盖模式)的画布会填满整个屏幕空间,并将画布下面的所有的UI元素置于屏幕的最上层,或者说画布的画面永远“覆盖”其他普通的3D画...
  • 用户界面精灵和画布

    2018-05-18 09:11:11
    1.Sprite精灵是UI以及unity 2D的基本元素。在UI系统中, 所有图片的显示都必须通过精灵。2.图片设置为精灵, 在...(1).Sprite Mode:精灵模式, 常用的有Single单图、Multiple多图模式。(2).Packing Tag:打包标签。具有...
  • 理论小知识:画布

    2020-07-25 14:53:14
    创建画布对象的常用办法是用 Canvas 的子类来创建画布 对象,并在子类中重写父类的方法 paint.需要注意的是,一定要在创建画布的类的构造方法 中给出画布尺寸 单位是像素。 Mycanvas 类中的构造方法必须通过 set...
  • 我们在前几讲分享了可视化中的一些常用操作,方便我们在日常分析中快速开发可视化,今天我们将为大家介绍如何在画布中调整可视化布局和设置。 调整可视化画布的布局 在OAC(Oracle数据分析云)中添加可视化到画布...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,429
精华内容 2,571
关键字:

常用画布尺寸