居中canvas
如何使用HTML5 canvas标记页面以便canvas
-
占80％的宽度
-
具有相应的像素高度和宽度，以有效地定义比率（并且在canvas拉伸至80％时按比例保持）
-
垂直和水平居中
你可以假定canvas是页面上唯一的东西，但是如果有必要的话，随便把它封装在div 。
这将水平居中canvas：
#canvas-container { width: 100%; text-align:center; } canvas { display: inline; }
HTML：
<div id="canvas-container"> <canvas>Your browser doesn't support canvas</canvas> </div>
看着目前的答案，我觉得一个简单和干净的修复程序丢失。 以防有人经过并寻找正确的解决scheme。 我用一些简单的CSS和JavaScript很成功。
居中canvas到屏幕或父元素的中间。 没有包装。
HTML：
<canvas id="canvas" width="400" height="300">No canvas support</canvas>
CSS：
#canvas { position: absolute; top:0; bottom: 0; left: 0; right: 0; margin:auto; }
使用Javascript：
window.onload = window.onresize = function() { var canvas = document.getElementById('canvas'); canvas.width = window.innerWidth * 0.8; canvas.height = window.innerHeight * 0.8; }
作品像一个魅力testing：火狐，铬
小提琴： http : //jsfiddle.net/djwave28/j6cffppa/3/
仅在Firefox上testing：
<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>
为了将canvas居中在窗口中，应将“px”添加到el.style.top和el.style.left 。
el.style.top = (viewportHeight - canvasHeight) / 2 +"px"; el.style.left = (viewportWidth - canvasWidth) / 2 +"px";
最简单的方法
把canvas放到这样的段落标签中：
<p align="center"> <canvas id="myCanvas" style="background:#220000" width="700" height="500" align="right"></canvas> </p>
鉴于没有JavaScript的canvas是没有什么，也使用JavaScript的大小和定位（你知道： onresize ， position:absolute等）
使用CSS调整canvas大小不是一个好主意。 它应该使用Javascript完成。 看下面的function是干什么用的
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"; }
演示在这里： http : //jsfiddle.net/9Rmwt/11/show/
。
与上面的Nickolay相同的代码，但在IE9和Chrome上testing（并删除了额外的渲染）：
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：
<body> <canvas id="canvas" style="background: #ffffff"> Canvas is not supported. </canvas> </body>
顶部和左边的偏移量只在我添加px时才起作用。
至于CSS的build议：
#myCanvas { width: 100%; height: 100%; }
按照这个标准，CSS不会调整canvas坐标系，它会缩放内容。 在Chrome中，所提到的CSS将向上或向下缩放canvas以适应浏览器的布局。 在坐标系小于浏览器尺寸（像素）的典型情况下，这会有效地降低绘图的分辨率。 它最有可能导致非比例绘图。
与div包装应该工作。 我在Firefox，Fedora 13上的Chrome（ demo ）中testing了它。
#content { width: 95%; height: 95%; margin: auto; } #myCanvas { width: 100%; height: 100%; border: 1px solid black; }
而且帆布应该被包裹在标签中
<div id="content"> <canvas id="myCanvas">Your browser doesn't support canvas tag</canvas> </div>
让我知道如果它的作品。 干杯。
简单：
<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>
