Относительный размер HTML Canvas

в HTML5 <canvas> элемент не принимает относительные размеры (В%) для его width и height свойства.

то, что я пытаюсь сделать, это иметь размер моего холста относительно окна. Это то, что я придумал до сих пор, но мне интересно, есть ли лучший способ:

  1. проще
  2. не требует упаковка <canvas> на <div>.
  3. не зависит от jQuery (я использую его, чтобы получить ширина / высота родительского div)
  4. в идеале, не перерисовывает размер браузера (но я думаю, что это может быть требованием)

см. ниже код, который рисует круг в середине экрана, шириной 40% до максимума 400px.

демо: http://jsbin.com/elosil/2

код:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas of relative width</title>
    <style>
        body { margin: 0; padding: 0; background-color: #ccc; }
        #relative { width: 40%; margin: 100px auto; height: 400px; border: solid 4px #999; background-color: White; }
    </style>
    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        function draw() {
            // draw a circle in the center of the canvas
            var canvas = document.getElementById('canvas');
            var relative = document.getElementById('relative');
            canvas.width = $(relative).width();
            canvas.height = $(relative).height();
            var w = canvas.width;
            var h = canvas.height;
            var size = (w > h) ? h : w; // set the radius of the circle to be the lesser of the width or height;
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(w / 2, h / 2, size/2, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fill();
        }

        $(function () {
            $(window).resize(draw);
        });
    </script>
</head>
<body onload="draw()">
    <div id="relative">
        <canvas id="canvas"></canvas>
    </div>
</body>
</html>
10
canvas html5 javascript

3 ответов

холст width и height атрибуты отделены от одного и того же холста width и height стили. The width и height атрибуты-это размер поверхности отрисовки холста в пикселях, в то время как его стили выбирают место в документе, где браузер должен рисовать содержимое из поверхности отрисовки. Так уж получилось, что значение по умолчанию для width и height стили если они не указаны, ширина поверхности перевода и высота. Итак, вы правы насчет № 1: нет причин заворачивать его в div. Вы можете установить процентные значения для всех стилей элемента canvas, как и для любого другого элемента.

для #3 довольно легко (и кросс-браузер) получить размер вещей с clientWidth и clientHeight, если вы не используете заполнение на своем элементе canvas.

я закодировал немного упрощенную версию здесь.

для #4, Вы правы о том, неудачливый. Можно проверить перед установкой ширины и высоты и оставить холст в покое, если он не нуждается в изменении размера, что устранит некоторые из перерисовок, но вы не можете избавиться от всех из них.

EDIT: Портман указал, что я испортил стиль центрирования. Обновленная версия здесь.

14

как сказал сетобриен а canvas элемент два пары ширина/высота атрибутов.

  1. canvas.width / canvas.height - это размер в пикселе буфера, который будет содержать результат команд рисования.

  2. canvas.style.width / canvas.style.height имеют размер, используемый для отображения объекта canvas в окне браузера, и они могут быть в любом из блоков, поддерживаемых css.

вы действительно можете установить canvas.width и canvas.height только один раз сделайте рисунок на холсте, установив параметры размера стиля в процентах, а затем забудьте о перерисовке содержимого холста. Конечно, это означает, что браузер будет просто масштабировать себя, как для обычного изображения, загруженного из сети, поэтому видимый результат покажет артефакты масштабирования пикселей.

вам нужно только перерисовать содержимое холста после изменения размера элемента холста, только если вы хотите получить идеальные результаты.

6

хорошо. Вот метод, который я использовал для реализации того же самого.

предположим, что у вас есть высота холста=400, для высоты окна=480, и вы хотите изменить его высоту относительно, Если высота окна изменяется на 640.

canvas = document.getElementById("canvas"); 
canvas.height=window.innerHeight*400/480;

p.s: не инициализируйте высоту холста внутри тега html.

используйте ' window.innerHeight (которая возвращает высоту окна браузера.. аналогично окне'.innerWidth') где угодно хотите рассчитать относительные позиции на окне.

надеюсь, что вы получили то, что вам нужно.

1