可能还存在其他问题，但我只是想用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, 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>这是上面评论链的答案版本。
要删除滚动条，请添加以下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, 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>