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

我正在玩節點/ 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; 

     // ... 
    } 
});

來源

2013-07-11 David Diliberto

你使用jQuery更改尺寸，並不會用帆布很好地工作（它將擴展畫布內容太）。直接在畫布元素上設置的尺寸：

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

設置畫布到全尺寸的窗口，試試這個：

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

來源

2013-07-11 00:49:27 bfavaretto

所以，如果我理解正確的，你說插入到該說該地區：'socket.on（ 'drawCanvas'，函數（canvasToDraw）{ 如果（canvasToDraw）{ canvas.width（500）; 上下文。 lineJoin ='round'; context.lineWidth = 2; '？我希望它是100％寬度和100％高度不是500px。非常感謝。 –

是的。我相信jQuery會嘗試設置style.width，它不會't很好地與畫布配合 – bfavaretto

@DavidDiliberto但是現在我想我誤解了這個問題，並且你問的是不同的東西...... – bfavaretto

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

偉大的工作。

來源

2013-07-11 01:41:33

使用clientWidth和帆布

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; 
}

並設置帆布的寬度和高度爲100％的CSS的clientHeight屬性;

來源

2014-05-10 09:06:39 birko

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

回答

相關問題