Html 将画布居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1152203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering a canvas
提问by user122147
How do I markup a page with an HTML5 canvassuch that the canvas
如何使用 HTML5 标记页面canvas，以便canvas
Takes up 80% of the width
Has a corresponding pixel height and width which effectively define the ratio (and are proportionally maintained when the canvas is stretched to 80%)
Is centered both vertically and horizontally
占宽度的 80%
具有相应的像素高度和宽度，可有效定义比率（并在画布拉伸到 80% 时按比例保持）
垂直和水平居中
You can assume that the canvasis the only thing on the page, but feel free to encapsulate it in divs if necessary.
您可以假设canvas是页面上唯一的内容，但div如有必要，请随意将其封装在s 中。
回答by Ali OKTAY
This will center the canvas horizontally:
这将使画布水平居中：
#canvas-container {
width: 100%;
text-align:center;
}
canvas {
display: inline;
}
HTML:
HTML：
<div id="canvas-container">
<canvas>Your browser doesn't support canvas</canvas>
</div>
回答by Daniel
Looking at the current answers I feel that one easy and clean fix is missing. Just in case someone passes by and looks for the right solution. I am quite successful with some simple CSS and javascript.
查看当前的答案，我觉得缺少一个简单而干净的解决方案。以防万一有人路过并寻找正确的解决方案。我使用一些简单的 CSS 和 javascript 非常成功。
Center canvas to middle of the screen or parent element. No wrapping.
将画布居中到屏幕或父元素的中间。没有包装。
HTML:
HTML：
<canvas id="canvas" width="400" height="300">No canvas support</canvas>
CSS:
CSS：
#canvas {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
Javascript:
Javascript：
window.onload = window.onresize = function() {
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.8;
}
Works like a charm - tested: firefox, chrome
像魅力一样工作 - 测试：firefox，chrome
回答by J the Helper
easiest way
最简单的方法
put the canvas into paragraph tags like this:
将画布放入段落标签中，如下所示：
<p align="center">
<canvas id="myCanvas" style="background:#220000" width="700" height="500" align="right"></canvas>
</p>回答by Nickolay
Tested only on Firefox:
仅在 Firefox 上测试：
<script>
window.onload = window.onresize = function() {
var C = 0.8; // canvas width to viewport width ratio
var W_TO_H = 2/1; // canvas width to canvas height ratio
var el = document.getElementById("a");
// For IE compatibility http://www.google.com/search?q=get+viewport+size+js
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var canvasWidth = viewportWidth * C;
var canvasHeight = canvasWidth / W_TO_H;
el.style.position = "fixed";
el.setAttribute("width", canvasWidth);
el.setAttribute("height", canvasHeight);
el.style.top = (viewportHeight - canvasHeight) / 2;
el.style.left = (viewportWidth - canvasWidth) / 2;
window.ctx = el.getContext("2d");
ctx.clearRect(0,0,canvasWidth,canvasHeight);
ctx.fillStyle = 'yellow';
ctx.moveTo(0, canvasHeight/2);
ctx.lineTo(canvasWidth/2, 0);
ctx.lineTo(canvasWidth, canvasHeight/2);
ctx.lineTo(canvasWidth/2, canvasHeight);
ctx.lineTo(0, canvasHeight/2);
ctx.fill()
}
</script>
<body>
<canvas id="a" style="background: black">
</canvas>
</body>
回答by Shawn
in order to center the canvas within the window +"px" should be added to el.style.topand el.style.left.
为了使窗口内的画布居中，应将 +"px" 添加到el.style.top和el.style.left。
el.style.top = (viewportHeight - canvasHeight) / 2 +"px";
el.style.left = (viewportWidth - canvasWidth) / 2 +"px";
回答by Diode
Resizing canvas using css is not a good idea. It should be done using Javascript. See the below function which does it
使用 css 调整画布大小不是一个好主意。它应该使用Javascript来完成。请参阅下面的功能
function setCanvas(){
var canvasNode = document.getElementById('xCanvas');
var pw = canvasNode.parentNode.clientWidth;
var ph = canvasNode.parentNode.clientHeight;
canvasNode.height = pw * 0.8 * (canvasNode.height/canvasNode.width);
canvasNode.width = pw * 0.8;
canvasNode.style.top = (ph-canvasNode.height)/2 + "px";
canvasNode.style.left = (pw-canvasNode.width)/2 + "px";
}
demo here : http://jsfiddle.net/9Rmwt/11/show/
演示在这里：http: //jsfiddle.net/9Rmwt/11/show/
.
.
回答by user2664108
Simple:
简单的：
<body>
<div>
<div style="width: 800px; height:500px; margin: 50px auto;">
<canvas width="800" height="500" style="background:#CCC">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</div>
</body>
回答by jerseyboy
As to the CSS suggestion:
至于CSS建议：
#myCanvas {
width: 100%;
height: 100%;
}
By the standard, CSS does not size the canvas coordinate system, it scales the content. In Chrome, the CSS mentioned will scale the canvas up or down to fit the browser's layout. In the typical case where the coordinate system is smaller than the browser's dimensions in pixels, this effectively lowers the resolution of your drawing. It most likely results in non-proportional drawing as well.
按照标准，CSS 不会调整画布坐标系的大小，而是缩放内容。在 Chrome 中，提到的 CSS 将放大或缩小画布以适应浏览器的布局。在坐标系小于浏览器尺寸（以像素为单位）的典型情况下，这会有效地降低绘图的分辨率。它也很可能导致不成比例的绘图。
回答by laishiekai
Same codes from Nickolay above, but tested on IE9 and chrome (and removed the extra rendering):
上面来自 Nickolay 的相同代码，但在 IE9 和 chrome 上进行了测试（并删除了额外的渲染）：
window.onload = window.onresize = function() {
var canvas = document.getElementById('canvas');
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var canvasWidth = viewportWidth * 0.8;
var canvasHeight = canvasWidth / 2;
canvas.style.position = "absolute";
canvas.setAttribute("width", canvasWidth);
canvas.setAttribute("height", canvasHeight);
canvas.style.top = (viewportHeight - canvasHeight) / 2 + "px";
canvas.style.left = (viewportWidth - canvasWidth) / 2 + "px";
}
HTML:
HTML：
<body>
<canvas id="canvas" style="background: #ffffff">
Canvas is not supported.
</canvas>
</body>
The top and left offset only works when I add px.
顶部和左侧偏移量仅在我添加px.
回答by Sainath Mallidi
Wrapping it with div should work. I tested it in Firefox, Chrome on Fedora 13 (demo).
用 div 包装它应该可以工作。我在 Fedora 13 上的 Firefox、Chrome 中对其进行了测试（演示）。
#content {
width: 95%;
height: 95%;
margin: auto;
}
#myCanvas {
width: 100%;
height: 100%;
border: 1px solid black;
}
And the canvas should be enclosed in tag
并且画布应该包含在标签中
<div id="content">
<canvas id="myCanvas">Your browser doesn't support canvas tag</canvas>
</div>
Let me know if it works. Cheers.
让我知道它是否有效。干杯。
