[英]How to center a html 5 canvas with javascript
我正在尝试使用javascript将动态html 5画布窗口居中。 我知道我的代码不起作用,但我想知道是否有一种方法可以实现margin-left:auto / margin-left:auto技术,通常将元素放在html页面中。 我也用我的画布类css尝试了这个,这也不起作用所以任何帮助都是值得赞赏的。 谢谢。
我的代码:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
document.getElementById("canvas").style.marginLeft = "auto";
document.getElementById("canvas").style.marginRight = "auto";
canvas.width = 300;
canvas.height = 300;
drawScreen();
formElement = document.getElementById("height");
formElement.addEventListener('change', heightChanged, true);
formElement = document.getElementById("width");
formElement.addEventListener('change', widthChanged, false);
function widthChanged(e) {
var target = e.target;
canvas.width = target.value;
drawScreen();
}
function heightChanged(e) {
var target = e.target;
canvas.height = target.value;
drawScreen();
}
function drawScreen() {
}
使画布成为块级元素。 您可以使用CSS或将此行添加到您的代码中:
canvas.style.display= 'block';
例:
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); document.getElementById("canvas").style.marginLeft = "auto"; document.getElementById("canvas").style.marginRight = "auto"; canvas.style.display= 'block'; canvas.width = 300; canvas.height = 300; drawScreen(); formElement = document.getElementById("height"); formElement.addEventListener('change', heightChanged, true); formElement = document.getElementById("width"); formElement.addEventListener('change', widthChanged, false); function widthChanged(e) { var target = e.target; canvas.width = target.value; drawScreen(); } function heightChanged(e) { var target = e.target; canvas.height = target.value; drawScreen(); } function drawScreen() { }
canvas { border: 1px solid black; background: yellow; }
<canvas id="canvas"></canvas> <div id="height"></div> <div id="width"></div>
你喜欢用css
:
canvas {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
或使用javascript
:
document.getElementById("canvas").style.display = "block";
document.getElementById("canvas").style.margin = "auto";
document.getElementById("canvas").style.position = "absolute";
document.getElementById("canvas").style.top = 0;
document.getElementById("canvas").style.bottom = 0;
document.getElementById("canvas").style.left = 0;
document.getElementById("canvas").style.right = 0;
你为什么不把画布放入div容器?
你也可以通过javascript来做到这一点。
var container = document.createElement("div");
container.style.marginLeft = "auto";
container.style.marginRight = "auto";
container.style.width = "300px";
container.innerHtml = canvas;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.