Question

我有一个画布我想要在屏幕上居中并保持宽度和高度，就像它在屏幕的左角一样。任何完全在元素中实现的答案都会很棒！

回答Bhuwan的问题;只需制作你喜欢的帆布。我不希望你使用我的特定画布来解决这个问题。把它变得一般！

可以让这个问题更容易回答，这是我用来测试答案是否有效的方法：

<canvas id="midcanvas"; style="width:300px;height:200px;border:red solid"></canvas>
<script>
document.addEventListener("DOMContentLoaded", init, false);
function init(){document.getElementById("midcanvas").addEventListener("mousedown", getPosition, false);}
function getPosition(event){
var x = new Number();
var y = new Number();
if (event.x != undefined && event.y != undefined){x = event.x;y = event.y;}else{
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;}
x -= document.getElementById("midcanvas").offsetLeft;
y -= document.getElementById("midcanvas").offsetTop;

alert(x + " " + y)
}
</script>

Answer 1

您可以使用IE将其居中，并使用display:flex将身体拉伸到整个窗口高度。

这显然只有在html, body { height: 100% }是您网页上的唯一元素时才有效。

＆＃13;

canvas

＆＃13;

html,
body {
  height: 100%
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

中心帆布，同时保持宽度和高度

1 个答案: