居中画布

如何标记一个页面的HTML5 canvas使得canvas

占据宽度的80%

具有相应的像素高度和宽度,有效地定义了比例(并且当画布拉伸到80%时按比例保持)

垂直和水平居中

您可以假设它canvas是页面上唯一的东西,但div如果需要,可以随意将其封装在s中.

这将使画布水平居中:

#canvas-container {
   width: 100%;
   text-align:center;
}

canvas {
   display: inline;
}

HTML:

   Your browser doesn't support canvas

看看目前的答案,我觉得缺少一个简单而干净的修复方法.以防有人经过并寻找合适的解决方案.我用一些简单的CSS和javascript非常成功.

将画布居中到屏幕中间或父元素.没有包装.

HTML:

No canvas support

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;
}

像魅力测试的工作:火狐,铬

小提琴:http://jsfiddle.net/djwave28/j6cffppa/3/

最简单的方法

将画布放入段落标签中,如下所示: