如何在调整大小时删除侧边栏时更改 canvas 大小？

Question

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

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

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, y, w, 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, g, b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
}

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

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

background(25, 25, 25);
fillColor(0, 123, 0);
strokeColor(0, 0, 123);
strokeSize(6);
rectangle(25, 25, 50 , 50);

<!DOCTYPE html>
<html>
<head>
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="main.js"></script>
</head>
<body></body>
</html>

Answer 1

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

要删除滚动条，请添加以下 CSS，这会删除 window 的边距。 canvas 周围还有额外的白色 space，您可以将其删除，或使其与 font-size: 0;

无关

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

要调整canvas的大小，首先去掉onresize函数中的width和height vars的重新声明，添加实际调整大小的代码：

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

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

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, 0, 123);
    strokeSize(6);
    rectangle(25, 25, 50 , 50);
}

function rectangle(x, y, w, h) {
    render.beginPath();
    render.rect(x, y, w, 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, g, b) {
    r = String(r);
    g = String(g);
    b = String(b);
    render.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
}

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

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

background(25, 25, 25);
fillColor(0, 123, 0);
strokeColor(0, 0, 123);
strokeSize(6);
rectangle(25, 25, 50 , 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>

如何在调整大小时删除侧边栏时更改 canvas 大小？

How do you make a canvas change size when resizing and remove side bar?

html

javascript

game-development

window-resize