HTML5 Canvas-空间从哪里出现？

Question

I have a inside of a canvas div and it is occupying too much space. I don't know how I should fix it. so there is the canvas occupying 600x250, and the div occupying another 600x250. I've added a screenshot so you can see what I'm talking about: click!

Am I missing something? I'm new to canvas btw. Just tried to do this thing so I learn something new :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

You're setting the canvas to be 55% lower than it should be.. this is why your actual canvas is rendered lower than it's parent div. Remove the .canvas stuff from the CSS and it will appear inside it's parent div again.

 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>