Центрирование холста

Question

Центрирование холста

Как разметить страницу с помощью HTML5 canvas такой, что canvas

Занимает 80% ширины
Имеет соответствующую высоту и ширину пикселя, которые эффективно определяют соотношение (и пропорционально поддерживаются, когда холст растягивается до 80%)
Центрируется как вертикально, так и горизонтально

Вы можете предположить, что canvas это единственная вещь на странице, но не стесняйтесь инкапсулировать ее в divс при необходимости.

68

html css html5 canvas

Источник

user122147 20 июл '09 в 07:54

13 ответов

Другие вопросы по тегам html css html5 canvas

user1156740 18 янв '12 в 16:53 2012-01-18 16:53 · Answer 1 · 2012-01-18 16:53

Это будет центрировать холст горизонтально:

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

canvas {
   display: inline;
}

HTML:

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

51

Источник

user1156740 18 янв '12 в 16:53

user699714 29 янв '15 в 05:54 2015-01-29 05:54 · Answer 2 · 2015-01-29 05:54

Глядя на текущие ответы, я чувствую, что одно простое и понятное исправление отсутствует. На всякий случай, если кто-то проходит мимо и ищет правильное решение. Я довольно успешен с некоторыми простыми 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/

user6482647 18 июн '16 в 10:43 2016-06-18 10:43 · Answer 3 · 2016-06-18 10:43

Самый простой способ

поместите холст в теги абзаца следующим образом:

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

15

Источник

user6482647 18 июн '16 в 10:43

user1026 29 окт '09 в 20:34 2009-10-29 20:34 · Answer 4 · 2009-10-29 20:34

Проверено только на 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>

user480730 28 июн '11 в 22:14 2011-06-28 22:14 · Answer 5 · 2011-06-28 22:14

Чтобы центрировать холст внутри окна, необходимо добавить "px" к el.style.top а также el.style.left,

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

4

Источник

user480730 28 июн '11 в 22:14

user1019753 26 дек '11 в 14:08 2011-12-26 14:08 · Answer 6 · 2011-12-26 14:08

Изменение размера холста с помощью 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/

,

user2664108 07 сен '15 в 12:03 2015-09-07 12:03 · Answer 7 · 2015-09-07 12:03

Просто:

<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 07 сен '15 в 12:03

user525576 30 апр '23 в 19:58 2023-04-30 19:58 · Answer 8 · 2023-04-30 19:58

С бутстрапом 5

      <div class="container d-flex justify-content-center">
    <div style="width: 800px;"><canvas id="acquisitions"></canvas></div>
</div>

0

Источник

user525576 30 апр '23 в 19:58

user116472 20 июл '09 в 12:35 2009-07-20 12:35 · Answer 9 · 2009-07-20 12:35

Учитывая, что холст ничто без JavaScript, используйте JavaScript также для определения размера и позиционирования (вы знаете: onresize, position:absolute, так далее.)

0

Источник

user116472 20 июл '09 в 12:35

user514128 22 окт '11 в 23:57 2011-10-22 23:57 · Answer 10 · 2011-10-22 23:57

Что касается предложения CSS:

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

По стандарту CSS не определяет размер системы координат холста, он масштабирует содержимое. В Chrome упомянутый CSS будет масштабировать холст вверх или вниз, чтобы соответствовать макету браузера. В типичном случае, когда система координат меньше размеров браузера в пикселях, это эффективно снижает разрешение вашего чертежа. Скорее всего, это также приводит к непропорциональному рисованию.

user1269828 26 ноя '12 в 06:56 2012-11-26 06:56 · Answer 11 · 2012-11-26 06:56

Те же коды от Николая выше, но проверены на 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,

user11982921 08 ноя '22 в 08:20 2022-11-08 08:20 · Answer 12 · 2022-11-08 08:20

Сделайте линию в центре и сделайте ее прозрачной. Эта линия будет точкой опоры для центрирования содержимого на холсте.

      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

user357010 29 авг '10 в 02:10 2010-08-29 02:10 · Answer 13 · 2010-08-29 02:10

Упаковка с 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>

Дайте мне знать, если это работает. Приветствия.