[英]How do I ensure canvas is contained in viewport
我有一个画布，这是我真正想要看到的页面上唯一的东西。 我正在尝试使其尺寸调整为在调整窗口大小时始终使整个画布可见，而没有滚动条并保持宽高比。
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let w = canvas.width; let h = canvas.height; ctx.fillStyle = 'teal'; ctx.fillRect(0, 0, w, h); ctx.strokeStyle = 'red'; ctx.lineWidth = 10; ctx.rect(5, 5, w - 5, h - 5); ctx.stroke();
* { background-color: white; max-height: 100%; max-width: 100%; margin: 0; padding: 0; } div#canvasDiv {} canvas#canvas { display: block; margin: auto; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div id="canvasDiv"> <canvas id="canvas" width="500" height="500" /> </div> </body> </html>
通过这种尝试，当我调整宽度大小时，它可以重新缩放。 但是，当我调整高度时，会溢出。
您可能想阅读这篇文章：[CSS居中：完整指南]（ https://css-tricks.com/centering-css-complete-guide/
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let w = canvas.width; let h = canvas.height; ctx.fillStyle = 'teal'; ctx.fillRect(0, 0, w, h); ctx.strokeStyle = 'red'; ctx.lineWidth = 10; ctx.rect(5, 5, w - 5, h - 5); ctx.stroke();
* { background-color: white; max-height: 100%; max-width: 100%; margin: 0; padding: 0; } canvas#canvas { display: block; margin: auto; position:absolute; top:0;bottom:0; left:0; right:0; }
<div id="canvasDiv"> <canvas id="canvas" width="500" height="500"/> </div>
Bootstrap Navbar-当前面的下拉列表折叠时，如何确保下拉列表的顶部在视口中？
[英]Bootstrap Navbar - How do I ensure that the top of a dropdown is in the viewport when the preceding dropdown collapses?
当视口改变时，如何动态更新画布尺寸（实际像素）？
[英]How do I dynamically update my canvas size (real pixels) when the viewport changes?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.