调整大小和删除侧栏时如何使画布更改大小？

编程问答 2022-05-23

问题描述

可能还有其他问题，但我只是想用 JavaScript 制作一个平台游戏，如果您有任何解决方案，非常感谢！

如果这是我可以自己研究的东西，请告诉我，因为我不擅长 JavaScript，通常会在谷歌上寻找答案。

var canvas = document.getElementById("canvas");
var render = canvas.getContext("2d");
var width;
var height;
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.absolute = "0px";

window.onresize = function() {
    var width;
    var height;
    width = window.innerWidth;
    height = window.innerHeight;
}

function rectangle(x,y,w,h) {
    render.beginPath();
    render.rect(x,h);
    render.fill();
    render.stroke();
}

function fillColor(r,g,b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
}

function strokeColor(r,b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.strokeStyle = "rgb(" + r + "," + b + ")";
}

function strokeSize(size) {
    render.linewidth = String(size);
}

function background(r,b) {
    fillColor(r,b);
    rectangle(0,width,height);
}

background(25,25,25);
fillColor(0,123,0);
strokeColor(0,123);
strokeSize(6);
rectangle(25,50,50);
<!DOCTYPE html>
<html>
<head>
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="main.js"></script>
</head>
<body></body>
</html>

解决方法

这是上面评论链的答案版本。

要删除滚动条，请添加以下 CSS，从窗口中删除边距。画布周围还有额外的空白区域，您可以将其删除或与 font-size: 0;

无关 
body {
  margin: 0;
  font-size: 0;
}

要调整画布大小，首先删除 onresize 函数内部对宽高变量的重新声明，添加实际的调整大小代码：

canvas.width = width;
canvas.height = height;

最后，在调整大小后重绘画布的内容，因为调整大小会清除画布。附带说明一下，使用样式属性更新画布大小不会清除画布，但会拉伸它，结果通常是不可取的。

var canvas = document.getElementById("canvas");
var render = canvas.getContext("2d");
var width;
var height;
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.absolute = "0px";

window.onresize = function() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    
    background(25,25,25);
    fillColor(0,123,0);
    strokeColor(0,123);
    strokeSize(6);
    rectangle(25,50,50);
}

function rectangle(x,y,w,h) {
    render.beginPath();
    render.rect(x,h);
    render.fill();
    render.stroke();
}

function fillColor(r,g,b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
}

function strokeColor(r,b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.strokeStyle = "rgb(" + r + "," + b + ")";
}

function strokeSize(size) {
    render.lineWidth = String(size);
}

function background(r,b) {
    fillColor(r,b);
    rectangle(0,width,height);
}

background(25,25);
fillColor(0,0);
strokeColor(0,123);
strokeSize(6);
rectangle(25,50);
body{
  margin: 0;
  font-size: 0;
}
<!DOCTYPE html>
<html>
<head>
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="main.js"></script>
</head>
<body></body>
</html>

game-developmenthtmljavascriptwindow-resize