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

我正在玩节点/ 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

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

回答

相关问题