javascript - HTML5 Canvas - 空间从哪里出现？

Question

我有一个 Canvas div 的内部，它占用了太多空间。我不知道该如何解决。 所以 Canvas 占据了 600x250，div 占据了另一个 600x250。 我添加了一个屏幕截图，以便您可以看到我在说什么: click!

我错过了什么吗？顺便说一句，我是 Canvas 的新手。刚刚尝试做这件事，所以我学到了一些新东西 :D

document.addEventListener('DOMContentLoaded', function () {
    var canvas = document.querySelector('canvas');
    var canvasx = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");

    canvas.width = canvasx.offsetWidth;
    canvas.height = canvasx.offsetHeight;

    
    var x1 = 85;
    var x2 = 150;
    var x3 = 245;
    var x4 = 350;
    var x5 = 430;
    var x6 = 520; 
    var y1 = 0;
    var x = 300;
    var y = 50;
    var dy = 2;
    var dy1 = 2
    var friction = 0.85;
    var gravity = 0.8;

    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillText("Front-End Developing", x, y1);
        ctx.fillText("✓ HTML", x1, y);
        ctx.font = "bold 20px Roboto Condensed";
        ctx.fillStyle = "#77dff1";
        ctx.textAlign = "center";
        ctx.fillText("✓ CSS", x2, y);
        ctx.fillText("✓ JavaScript", x3, y);
        ctx.fillText("✓ Canvas", x4, y);
        ctx.fillText("✓ jQuery", x5, y);
        ctx.fillText("✓ Bootstrap", x6, y);  
        if (y + 50 > canvas.height) {
            dy = -dy * friction;
        }
        else {
            dy += gravity;
        }
        if (y1 - 100 > canvas.height) {
            dy1 = -dy1 * friction;
        }
        else {
            dy1 += gravity;
        }

        y1 += dy;
        y += dy;
    }

    animate();
});

#central-skills {
    margin: 0 auto;
    max-width: 1300px;
    font-family: 'Roboto Condensed', sans-serif;
    user-select: none;
    font-weight: bold;
    font-size: 2.4rem;
    margin-top: 200px;
}

#canvas {
    width: 600px;
    height: 250px;
    margin: 0 auto;
    text-align: center;
}

.canvas {
    position: relative;
    bottom: 55%;
}

.trying {
    text-align: center;
}

#website ul {
    margin-top: 2rem;
    list-style-type: none;
}

#websites li:before {
    content: "\2714\0020";
}

#websites {

    font-size: 0 !important;
}

.websites {
    text-align: center;

}

#websites ul {

}

#websites li {
    font-size: 2.4rem;
}

.list-adv {
    display: inline-block;
    border: 2px solid #77dff1;
    padding: 6rem;
    margin: 0;
    color: #77dff1;
}

.scratch {

}

.mobile-skills {
    visibility: hidden;
}
#icons {
    font-size: 10rem;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 6vw;
}

.fa-html5 {

}

.fa-js-square {

}

.fa-css3-alt {

}

<div id="central-skills">
            <h6 class="trying">Currently I consider myself familiar and comfortable with:</h6>
            <h6 class="mobile-skills">html CSS JavaScript jQuery Bootstrap Canvas</h6>
            <div id="canvas">
                <canvas class="canvas"></canvas>
                <script src="js/canvas.js"></script>
            </div>                
                <div id="icons">
                    <ul>
                        <li id="html"><i class="fab fa-html5"></i></li>
                        <li id="js"><i class="fab fa-js-square"></i></li>
                        <li id="css"><i class="fab fa-css3-alt"></i></li>
                    </ul>
                </div>
                <div id="websites"> 
                    <ul>
                        <li class="list-adv 1">Responsive</li>
                        <li class="list-adv 2">Using a clean and easy to follow code</li>
                        <li class="list-adv 3">Clean and good-looking</li>
                        <li class="list-adv 4">Optimized for Search Engines (SEO)</li>
                        <li class="list-adv scratch">Coded from scratch (unless there is a need of a CMS)</li>
                    </ul>
                </div>
            </div>

Answer 1

您将 Canvas 设置为比应有的低 55%。这就是为什么您的实际 Canvas 呈现低于其父 div 的原因。从 CSS 中删除 .canvas 内容，它将再次出现在它的父 div 中。

document.addEventListener('DOMContentLoaded', function () {
    var canvas = document.querySelector('canvas');
    var canvasx = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");

    canvas.width = canvasx.offsetWidth;
    canvas.height = canvasx.offsetHeight;

    
    var x1 = 85;
    var x2 = 150;
    var x3 = 245;
    var x4 = 350;
    var x5 = 430;
    var x6 = 520; 
    var y1 = 0;
    var x = 300;
    var y = 50;
    var dy = 2;
    var dy1 = 2
    var friction = 0.85;
    var gravity = 0.8;

    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillText("Front-End Developing", x, y1);
        ctx.fillText("✓ HTML", x1, y);
        ctx.font = "bold 20px Roboto Condensed";
        ctx.fillStyle = "#77dff1";
        ctx.textAlign = "center";
        ctx.fillText("✓ CSS", x2, y);
        ctx.fillText("✓ JavaScript", x3, y);
        ctx.fillText("✓ Canvas", x4, y);
        ctx.fillText("✓ jQuery", x5, y);
        ctx.fillText("✓ Bootstrap", x6, y);  
        if (y + 50 > canvas.height) {
            dy = -dy * friction;
        }
        else {
            dy += gravity;
        }
        if (y1 - 100 > canvas.height) {
            dy1 = -dy1 * friction;
        }
        else {
            dy1 += gravity;
        }

        y1 += dy;
        y += dy;
    }

    animate();
});

#central-skills {
    margin: 0 auto;
    max-width: 1300px;
    font-family: 'Roboto Condensed', sans-serif;
    user-select: none;
    font-weight: bold;
    font-size: 2.4rem;
    margin-top: 200px;
}

#canvas {
    width: 600px;
    height: 250px;
    margin: 0 auto;
    text-align: center;
}

/**
You're setting the canvas to be 55% lower than it should be.. this is why you're having trouble. I don't why this is here in the first place but removing it will fix the problem.

.canvas {
    position: relative;
    bottom: 55%;
}
*/

.trying {
    text-align: center;
}

#website ul {
    margin-top: 2rem;
    list-style-type: none;
}

#websites li:before {
    content: "\2714\0020";
}

#websites {

    font-size: 0 !important;
}

.websites {
    text-align: center;

}

#websites ul {

}

#websites li {
    font-size: 2.4rem;
}

.list-adv {
    display: inline-block;
    border: 2px solid #77dff1;
    padding: 6rem;
    margin: 0;
    color: #77dff1;
}

.scratch {

}

.mobile-skills {
    visibility: hidden;
}
#icons {
    font-size: 10rem;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 6vw;
}

.fa-html5 {

}

.fa-js-square {

}

.fa-css3-alt {

}

<div id="central-skills">
            <h6 class="trying">Currently I consider myself familiar and comfortable with:</h6>
            <h6 class="mobile-skills">html CSS JavaScript jQuery Bootstrap Canvas</h6>
            <div id="canvas">
                <canvas class="canvas"></canvas>
                <script src="js/canvas.js"></script>
            </div>                
                <div id="icons">
                    <ul>
                        <li id="html"><i class="fab fa-html5"></i></li>
                        <li id="js"><i class="fab fa-js-square"></i></li>
                        <li id="css"><i class="fab fa-css3-alt"></i></li>
                    </ul>
                </div>
                <div id="websites"> 
                    <ul>
                        <li class="list-adv 1">Responsive</li>
                        <li class="list-adv 2">Using a clean and easy to follow code</li>
                        <li class="list-adv 3">Clean and good-looking</li>
                        <li class="list-adv 4">Optimized for Search Engines (SEO)</li>
                        <li class="list-adv scratch">Coded from scratch (unless there is a need of a CMS)</li>
                    </ul>
                </div>
            </div>