將畫布調整為完整的瀏覽器窗口寬度和高度

Question

我正在玩一個node / socket.io虛構游戲。 我事先表示歉意，我是一名設計師，不太熱衷於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[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

使用畫布的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％；