居中画布答案

【问题标题】：Centering a canvas居中画布
【发布时间】：2010-11-12 05:44:03
【问题描述】：

如何使用 HTML5 canvas 标记页面，以便 canvas

占宽度的 80%
具有有效定义比率的相应像素高度和宽度（并且在画布拉伸到 80% 时按比例保持）
垂直和水平居中

您可以假设canvas 是页面上唯一的内容，但如有必要，请随意将其封装在divs 中。

【问题讨论】：

标签： css html canvas

【解决方案1】：

最简单的方法

将画布放入段落标签中，如下所示：

<p align="center">
  <canvas id="myCanvas" style="background:#220000" width="700" height="500" align="right"></canvas>
</p>

【讨论】：

我不认为这解决了 OP 希望将画布缩放到其父级宽度的 80% 的同时保持其宽高比的问题。

【解决方案2】：

简单：

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

【讨论】：

我不认为这解决了 OP 希望将画布缩放到其父级宽度的 80% 的同时保持其宽高比的问题。

【解决方案3】：

查看当前的答案，我觉得缺少一个简单而干净的修复方法。以防万一有人路过并寻找正确的解决方案。我用一些简单的 CSS 和 javascript 相当成功。

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

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

像魅力一样工作 - 测试：firefox、chrome

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

【讨论】：

【解决方案4】：

与上述 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：

<body>
  <canvas id="canvas" style="background: #ffffff">
     Canvas is not supported.
  </canvas>
</body>

仅当我添加px 时，顶部和左侧偏移才有效。

【讨论】：

【解决方案5】：

仅在 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>

【讨论】：

@Mark 你不能在onload-event 中调用onload-event ;) jsfiddle.net/FUCur/121
@yckart：我只是复制并粘贴了 Nickolay 的内容；我什至没有想到这一点。解释了为什么它最初不渲染:-)
好答案。您可以通过在开始时调用一个 scale() 来清理绘图代码，然后您可以消除所有与画布相关的绘图代码。此处示例：stackoverflow.com/a/63642064/670530

【解决方案6】：

这将使画布水平居中：

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

canvas {
   display: inline;
}

HTML：

<div id="canvas-container">
   <canvas>Your browser doesn't support canvas</canvas>
</div>

【讨论】：

#canvas-container { 宽度：100%;文本对齐：居中；边距：自动； } 它对我有用

【解决方案7】：

用 div 包装它应该可以工作。我在 Firefox、Fedora 13 上的 Chrome (demo) 上对其进行了测试。

#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>

让我知道它是否有效。干杯。

【讨论】：

【解决方案8】：

使用 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";


}

在这里演示：http://jsfiddle.net/9Rmwt/11/show/

.

【讨论】：

【解决方案9】：

为了使画布在窗口中居中，应将 +"px" 添加到 el.style.top 和 el.style.left。

el.style.top = (viewportHeight - canvasHeight) / 2 +"px";
el.style.left = (viewportWidth - canvasWidth) / 2 +"px";

【讨论】：

【解决方案10】：

关于 CSS 建议：

#myCanvas { 
 width: 100%;
 height: 100%;
}

按照标准，CSS 不会调整画布坐标系的大小，它会缩放内容。在 Chrome 中，提到的 CSS 将放大或缩小画布以适应浏览器的布局。在坐标系小于浏览器的像素尺寸的典型情况下，这实际上会降低绘图的分辨率。它也很可能导致不成比例的绘图。

【讨论】：

【解决方案11】：

鉴于没有 JavaScript 画布什么都不是，所以也要使用 JavaScript 来调整大小和定位（你知道：onresize、position:absolute 等）

【讨论】：