Question

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

我只是想重新调整画布的大小，这样它就会成为浏览器窗口的整个宽度和高度，而不会缩放笔画路径？现在，Javascript将画布设置为500px。

以下是相关代码：

// ================================================
//                           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

你正在使用jQuery来改变尺寸，这对于canvas来说效果不佳（它也会缩放画布内容）。直接在canvas元素上设置尺寸：

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

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

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

Answer 2

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

工作得很好。

Answer 3

使用canvas的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％;

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

3 个答案: