javascript - 将画布大小调整为完整的浏览器窗口宽度和高度

Question

我正在玩一个 node/socket.io 字典游戏。我提前道歉，我是一名设计师，对js不太热衷。

我只是想重新调整画布的大小，使其成为浏览器窗口的整个宽度和高度，而不放大笔触路径？现在，Javascript 将画布设置为 500 像素。

以下是相关代码：

// ================================================
//                           canvas drawing section
// ================================================

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

socket.on('drawCanvas', function(canvasToDraw) {
    if(canvasToDraw) {
        canvas.width(500);
        context.lineJoin = 'round';
        context.lineWidth = 2;

        // ...
    }
});

Answer 1

使用画布的 clientWidth 和 clientHeight 属性

if (canvas[0].width != canvas[0].clientWidth || canvas[0].height != canvas[0].clientHeight) {
    canvas[0].width = canvas[0].clientWidth;
    canvas[0].height = canvas[0].clientHeight;
}

并将画布宽度和高度的 css 设置为 100%；

Answer 2

canvas[0].width = $(window).width();
canvas[0].height = $(window).height();

工作得很好。

Answer 3

您正在使用 jQuery 来更改尺寸，这不适用于画布（它也会缩放画布内容）。直接在画布元素上设置尺寸：

canvas[0].width = 500;
// Or:
canvas.get(0).width = 500;

要将画布设置为完整的窗口尺寸，请尝试以下操作：

canvas[0].width = $(window).width();
canvas[0].height = $(window).height();