0

我正在尝试实现这样的布局：

想要的效果

在哪里：

  • Navbar只是一个类似 bootstrap 的顶部菜单，60px 的高度，总是在顶部
  • Pop-up menu固定在那个位置（不总是可见），总是在上面
  • 整个空闲区域（windows wo navbar）都被Canvas.

现场示例： jsFiddle

我有一个问题Canvas。我目前有一个简单的风格：

<canvas id="le_canvas">Y U NO CANVAS</canvas>
...
#le-canvas {
    position:absolute;
    width:100%;
    height:100%;
}

并且画布正在填充背景，但是：

  • 分辨率很低
  • 它在窗口调整大小期间不保持比率。

我想要什么（如果可能的话）：

  • 要填充的区域的全分辨率（画布和屏幕上的像素为 1:1）
  • 设置要填充的区域的比例
  • 奖励：在窗口调整大小后更新上述内容
4

2 回答 2

1

以百分比设置画布元素不会设置必须以绝对像素设置的实际画布大小。这里发生的是你得到一个默认大小的画布，然后被 html 渲染拉伸，看起来模糊。

因此，您需要使用 f.ex 设置大小。以绝对像素为单位的窗口大小。

你可以这样做（这里的小提琴更新：http: //jsfiddle.net/x5LpA/3/） -

创建一个根据窗口大小设置画布大小的函数（您当然需要减去条的高度等，但要显示原理）：

function initCanvasArea(cnv) {
    cnv.width = window.innerWidth;
    cnv.height = window.innerHeight;
}

由于在重新调整画布大小时画布内容会被清除，因此您需要每次重新渲染内容。因此，将渲染内容提取到像 f.ex 这样的单独函数中会很聪明：

function renderCanvas(ctx) {
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect(0, 0, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(20, 20, 55, 50);
}

现在，让 main 函数成为一个自调用函数，您还可以在其中附加一个用于windo.resize 的事件处理程序以更新画布：

$(function () {

    var canvas = $('#le_canvas')[0];
    var ctx = canvas.getContext('2d');

    initCanvasArea(canvas);
    renderCanvas(ctx);

    window.onresize = function(e) {
        initCanvasArea(canvas);
        renderCanvas(ctx);
    };


})();

最后通过删除设置为 100% 的宽度/高度来编辑 CSS 规则；

#le_canvas {
    position:absolute;
}

（提示：这里更好的方法是使用fixed位置属性 - 加上使用包装元素、填充、框大小......但这超出了这个问题的范围）。

于 2013-03-21T18:28:38.503 回答
0

这就是你所追求的吗？我使用$(document).width()and$(document).height()来获取矩形的宽度和高度。http://jsfiddle.net/x5LpA/1/

于 2013-03-21T17:58:47.980 回答