在 html 文档中滚动一点答案

【问题标题】：a little bit scrolling in html document在 html 文档中滚动一点
【发布时间】：2021-05-16 18:17:13
【问题描述】：

当我在浏览器中运行我的代码时，它显示了一点滚动但没有滚动条。我正在尝试在 html 画布中制作游戏，但是当我使用 dpi 缩放并使其平滑时，它会显示一点滚动。
这是文档的代码 =>

<!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>

当我在浏览器中运行我的代码时，它显示了一点滚动但没有滚动条。

【问题讨论】：

欢迎来到 SO！请不要在画布上使用 CSS 宽度/高度——它会扭曲画布。仅使用 canvas.width 和 canvas.height 属性。
这能回答你的问题吗？ HTML Canvas Full Screen

标签： javascript html canvas

【解决方案1】：

现在我知道了答案。问题出在 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>

我希望清楚

【讨论】：

如果您展示了导致解决方案的更改，将会更容易阅读。

【解决方案2】：

您是否尝试过使用 width: 100vw; 和 height: 100vh; 而不是 100%。有时使用 100% 并不能按照您希望的方式工作。您还可以在css 和javascript 中为画布指定一个高度。

【讨论】：