当我在浏览器中运行代码时，它显示了一点滚动，但没有滚动条。我试图在html画布上制作一个游戏，但当我使用dpi缩放并使其平滑时，它显示了一点滚动。
这是document =>
的代码
<!DOCTYPE html>
<html>
<style>
body {
margin: 0px;
}
canvas {
height: 100%;
width: 100%;
position: relative;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var c = canvas.getContext('2d');
let dpi = window.devicePixelRatio;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function fix_dpi() {
let style_height = canvas.height;
let style_width = canvas.width;
canvas.setAttribute('height', style_height * dpi + "px");
canvas.setAttribute('width', style_width * dpi + "px");
}
fix_dpi();
function Player(x, y, size, angle) {
this.x = x;
this.y = y;
this.size = size;
this.angle = angle;
this.draw = function() {
c.beginPath();
c.fillStyle = "#b3ffff";
c.moveTo(this.x + (Math.sin(this.angle * Math.PI / 180) * this.size), this.y + (Math.cos(this.angle * Math.PI / 180) * this.size));
c.lineTo(this.x + (Math.sin((this.angle + 120) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 120) * Math.PI / 180) * this.size));
c.lineTo(this.x + (Math.sin((this.angle + 240) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 240) * Math.PI / 180) * this.size));
c.lineTo(this.x + (Math.sin((this.angle + 360) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 360) * Math.PI / 180) * this.size));
c.fill();
c.closePath();
c.beginPath();
c.fillStyle = " #e6ffe6";
c.arc(this.x + (Math.sin(this.angle * Math.PI / 180) * this.size), this.y + (Math.cos(this.angle * Math.PI / 180) * this.size), this.size / 3, 0, Math.PI * 2, false);
c.fill();
}
}
addEventListener("keydown", event => {
if (event.keyCode == 32) {
sta = "trigger";
} else if (event.keyCode == 38) {
stu = "on";
}
})
addEventListener("keyup", event => {
if (event.keyCode == 32) {
sta = "off";
} else if (event.keyCode == 38) {
stu = "off";
}
})
var sta = "off";
var stu = "off";
var angle = 180;
var x = 100;
var rspeed = 5;
var size = 5;
var y = 100;
var sizex = 50;
function animate() {
requestAnimationFrame(animate);
c.globalAlpha = 0.3;
c.fillStyle = "#00004d";
c.fillRect(0, 0, canvas.width, canvas.height);
if (sta == "trigger") {
angle = angle + rspeed;
}
if (stu == "on") {
x = x + Math.sin(Math.PI / 180 * angle) * size;
y = y + Math.cos(Math.PI / 180 * angle) * size;
}
var player = new Player(x, y, sizex, angle);
c.globalAlpha = 1;
player.draw();
}
animate();
</script>
</body>
</html>当我在浏览器中运行代码时它显示了一些滚动，但是没有滚动条。
现在我知道答案了。问题是在js中，我正在声明画布的宽度和高度，而不是对画布做这样的事情，我必须这样做:
<html>
<head>
<style>
body{
margin : 0px;
}
canvas{
width : 100%;
height : 100%;
}
</style>
</head>
<body>
<canvas id="canvas">
<script>
var canvas = document.getElementById("canvas");
var dpr = window.devicePixelRatio;
var c = canvas.getContext("2d")
//fixing dpi
canvas.width = canvas.offsetWidth * dpr;
canvas.height = canvas.offsetHeight * dpr;
c.scale(dpr,dpr)
//dpi fixed
function Player(x, y, size, angle) {
this.x = x;
this.y = y;
this.size = size;
this.angle = angle;
this.draw = function() {
c.beginPath();
c.fillStyle = "#b3ffff";
c.moveTo(this.x + (Math.sin(this.angle * Math.PI / 180) * this.size), this.y + (Math.cos(this.angle * Math.PI / 180) * this.size));
c.lineTo(this.x + (Math.sin((this.angle + 120) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 120) * Math.PI / 180) * this.size));
c.lineTo(this.x + (Math.sin((this.angle + 240) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 240) * Math.PI / 180) * this.size));
c.lineTo(this.x + (Math.sin((this.angle + 360) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 360) * Math.PI / 180) * this.size));
c.fill();
c.closePath();
c.beginPath();
c.fillStyle = " #e6ffe6";
c.arc(this.x + (Math.sin(this.angle * Math.PI / 180) * this.size), this.y + (Math.cos(this.angle * Math.PI / 180) * this.size), this.size / 3, 0, Math.PI * 2, false);
c.fill();
}
}
addEventListener("keydown", event => {
if (event.keyCode == 32) {
sta = "trigger";
} else if (event.keyCode == 38) {
stu = "on";
}
})
addEventListener("keyup", event => {
if (event.keyCode == 32) {
sta = "off";
} else if (event.keyCode == 38) {
stu = "off";
}
})
var sta = "off";
var stu = "off";
var angle = 180;
var x = 100;
var rspeed = 5;
var size = 5;
var y = 100;
var sizex = 50;
function animate() {
requestAnimationFrame(animate);
c.globalAlpha = 0.3;
c.fillStyle = "#00004d";
c.fillRect(0, 0, canvas.width, canvas.height);
if (sta == "trigger") {
angle = angle + rspeed;
}
if (stu == "on") {
x = x + Math.sin(Math.PI / 180 * angle) * size;
y = y + Math.cos(Math.PI / 180 * angle) * size;
}
var player = new Player(x, y, sizex, angle);
c.globalAlpha = 1;
player.draw();
}
animate();
</script>
</body>
</html>
我希望这是清楚的
您是否尝试过使用width: 100vw;和height: 100vh;而不是100% ?有时候使用100%并不会达到你想要的效果。此外，您还可以在css和javascript中设置画布的高度。