居中画布

Question

居中画布

csshtmlcanvas

67

如何使用HTML5的canvas标记网页，以使canvas满足以下要求：

占据80%的宽度
具有相应的像素高度和宽度，有效地定义了画布的比例（当画布被拉伸到80％时按比例维护）
在垂直和水平方向上居中

您可以假设canvas是页面上唯一的元素，但如果需要，可以将其封装在div中。

- user122147

13个回答

26

阅读当前的答案，我感觉缺少一种简单而干净的解决方法。以防有人路过并寻找正确的解决方案，我用一些简单的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;
}

非常好用 - 经过测试: 火狐浏览器，谷歌浏览器

代码演示: http://jsfiddle.net/djwave28/j6cffppa/3/

- Daniel

15

最简单的方法

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>

- J the Helper

我认为这并没有解决 OP 想要画布缩放到其父元素宽度的 80％，同时保持其宽高比的需求。 - Le Mot Juiced

7

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

- Nickolay

1

@Mark，你不能在onload事件中调用onload事件 ;) http://jsfiddle.net/FUCur/121/ - yckart

@yckart：我只是复制并粘贴了Nickolay的代码，我甚至没有考虑过那个问题。这就解释了为什么最初无法呈现 :-) - mpen

好的答案。你可以在开头进行一次单独的scale()调用来清理绘图代码，然后你就可以消除所有与画布相关的绘图代码。示例在这里：https://dev59.com/AXI-5IYBdhLWcg3wy7-n#63642064 - DoomGoober

4

为了让画布在窗口中央，应该在 el.style.top 和 el.style.left 中添加 +"px"。

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

- Shawn

1

使用 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/

.

- Diode

1

简单：

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

- user2664108

我认为这并不能满足OP的需求，即让画布缩放到其父元素宽度的80％，同时保持其宽高比。 - Le Mot Juiced

0

关于 CSS 建议：

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

按照标准，CSS不会调整画布的坐标系统大小，而是缩放内容。在Chrome中，上述CSS将会根据浏览器的布局来缩放画布。一般情况下，如果坐标系统小于浏览器的像素尺寸，这实际上降低了绘图的分辨率。同时也很可能导致非比例绘图。

- jerseyboy

0

在中心画一条透明的线。这条线将成为将内容置于画布中心的支点

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.strokeStyle = 'transparent';
context.moveTo(width/2, 0);
context.lineTo(width/2, height);
context.stroke();
context.textAlign = 'center';

其中宽度和高度是 HTML 画布的尺寸大小

- Dev Lởm

0

这是来自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 时，上部和左部偏移量才有效。

- laishiekai

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ali OKTAY · Accepted Answer

这将使画布水平居中：

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

canvas {
   display: inline;
}

HTML:

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