HTML5 Canvas 以全分辨率填充窗口答案

【问题标题】：HTML5 Canvas fills windows with full resolutionHTML5 Canvas 以全分辨率填充窗口
【发布时间】：2013-03-11 08:46:53
【问题描述】：

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

地点：

Navbar 只是一个类似引导程序的顶部菜单，高度为 60 像素，始终位于顶部
Pop-up menu 固定在那个位置（并不总是可见），总是在顶部
整个空闲区域（没有导航栏的窗口）都填满了Canvas。

现场示例： jsFiddle

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

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

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

分辨率很低
在调整窗口大小时不会保持比例。

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

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

【问题讨论】：

你有 jsfiddle 吗？很难确切知道问题出在哪里。

标签： css html canvas

【解决方案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 属性作为位置 - 加上使用包装元素、填充、框大小..但这超出了这个问题的范围）。

【讨论】：

【解决方案2】：

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

【讨论】：