web-dev-qa-db-ja.com

キャンバスの中央揃え

HTML5 canvasでページをマークアップして、canvas

  1. 幅の80％を占める

  2. 比率を効果的に定義する対応するピクセルの高さと幅があります（キャンバスが80％に引き伸ばされると比例的に維持されます）

  3. 垂直と水平の両方に中央揃えされます

canvasがページ上の唯一のものであると想定できますが、必要に応じてdivsにカプセル化してください。

htmlcsshtml5canvas
52
user122147

これにより、キャンバスが水平方向に中央揃えされます。

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

canvas {
   display: inline;
}

HTML：

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

現在の回答を見ると、簡単でクリーンな修正が1つ欠けていると感じています。誰かが通り過ぎて適切な解決策を探す場合に備えて。簡単な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/

18
Daniel

最も簡単な方法

キャンバスを次のような段落タグに配置します。

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

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

ウィンドウ内でキャンバスを中央に配置するには、el.style.topおよびel.style.leftに+「px」を追加する必要があります。

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

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/

。

1
Diode

シンプル：

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

キャンバスはJavaScriptなしではないことを考えると、サイズ設定と配置にもJavaScriptを使用してください（onresize、position:absoluteなど）。

0
Thomas Broyer

Divでラップすることで動作するはずです。 Firefoxでテストしました、Chrome Fedora 13で（ デモ ）。

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

動作するかどうか教えてください。乾杯。

0
Sainath Mallidi

CSSの提案について：

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

標準では、CSSはキャンバスの座標系のサイズを変更せず、コンテンツをスケーリングします。 Chromeでは、言及されているCSSは、ブラウザーのレイアウトに合わせてキャンバスを拡大または縮小します。座標系がブラウザのピクセル単位の寸法よりも小さい典型的なケースでは、これにより描画の解像度が効果的に低下します。ほとんどの場合、非比例的な描画にもなります。

0
jerseyboy

上記の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を追加すると、上部と左のオフセットのみが機能します。

0
laishiekai