我的网页上设置了一个画布，其中运行了一个js动画，它填满了整个浏览器窗口但是当我调整窗口大小时，我似乎无法让画布自动调整大小以适应新窗口尺寸。有人能告诉我我需要添加到我的js以正确使用此功能吗？谢谢！
methodCallvar canvas = document.getElementById('canvas');
var makecodeplay = canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
makecodeplay.clearRect(0, 0, canvas.width, canvas.height);
makecodeplay.fillStyle = "rgb(75,77,81)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
function randomPaint(inX, inY) {
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
var r, g, b;
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
makecodeplay.beginPath();
makecodeplay.fillStyle = "rgba(35,37,41,0.3)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
makecodeplay.fill();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
makecodeplay.lineWidth = 10;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
makecodeplay.lineWidth = 4;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
makecodeplay.lineWidth = 1;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
setTimeout(function () {
randomPaint(x, y)
}, 100);
}
randomPaint(1, 1);
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
html {
background-color: "#555761";
background: "#555761";
}
body {
font-family: "brandon-grotesque";
font-wieght: 100;
font-style: normal;
color: #656771;
bgcolor: "#555761";
}
p {
font-family: "brandon-grotesque";
font-wieght: 100;
font-style: normal;
color: #656771;
}
a {
color: #555761;
}
a:link {
color: #555761;
text-decoration: none;
}
a:visited {
color: #555761;
text-decoration: none;
}
a:hover {
color: #656771;
text-decoration: none;
}
a:active {
color: #555761;
text-decoration: none;
}
/* Auto center content in window */
#stage {
width:100%;
margin: 0 auto;
padding: 0;
}
#stage canvas, #overlay {
position: absolute;
margin: 0 auto;
padding: 0;
}
#overlay {
margin: 0 auto;
padding: 0;
}
#overlay p {
color: #333;
font-family: "museo-sans";
font-weight: 900;
font-style: normal;
font-size: 14px;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.centered-bottom {
position: fixed;
bottom: 3%;
left: 50%;
transform: translate(-50%, -0%);
-webkit-transform: translate(-50%, -50%);
}
答案 0 :(得分：5)
此解决方案对调整大小有闪烁效果，但在任何大小下看起来都很好。
通过在更改宽度/高度时完全使用JQuery，它消除了闪烁。这是一个改进版本：
JS：
$(function(){
resizeCanvas();
});
$(window).on('resize', function(){
resizeCanvas();
});
function resizeCanvas()
{
var canvas = $('#canvas');
canvas.css("width", $(window).width());
canvas.css("height", $(window).height());
}
使用JQuery而不是使用纯CSS的原因是背景画布绝对定位。
如果可以帮助JQuery hack并不是优选的，但它似乎是这种情况的最佳选择。
答案 1 :(得分：3)
这会调整画布的分辨率。 canvas.width = window.innerWidth; canvas.height = window.innerHeight;
为画布类添加样式宽度：100％和高度：100％，以使画布具有全宽和高度。
body {
background-color: #E8E8E8;
}
#E8E8E8var canvas = document.getElementById('canvas');
var makecodeplay = canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
makecodeplay.clearRect(0, 0, canvas.width, canvas.height);
makecodeplay.fillStyle = "rgb(75,77,81)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
function randomPaint(inX, inY) {
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
var r, g, b;
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
makecodeplay.beginPath();
makecodeplay.fillStyle = "rgba(35,37,41,0.3)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
makecodeplay.fill();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
makecodeplay.lineWidth = 10;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
makecodeplay.lineWidth = 4;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
makecodeplay.lineWidth = 1;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
setTimeout(function () {
randomPaint(x, y)
}, 100);
}
randomPaint(1, 1);
答案 2 :(得分：2)
有一个用于检测窗口大小调整的事件处理程序：https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onresize
所以你可以做类似
的事情window.onresize = function()
{
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.style.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.height = window.innerHeight;
}
答案 3 :(得分：-1)
这已在https://stackoverflow.com/a/7863738/1619663
之前得到解答 尝试将画布尺寸设置为屏幕尺寸而不是窗口尺寸。
即。
canvas.width=screen.width;
canvas.height=screen.height;
<击>
参见JSFiddle： https://jsfiddle.net/rjgunning/wLbzv7e0/