Масштаб HTML Canvas

Я начал экспериментировать с рисованием на объекте Canvas. В прошлом мое знакомство с Canvas было сосредоточено (NPI) на манипуляциях с изображениями, поэтому я в меру знаком с его системой координат и процессом преобразования. Я работаю с тестовым холстом с размером экрана 30 X 30. Получив дескриптор 2D-контекста, я делаю один вызов:

ctx.fillRect(0,0,10,10);

выводит в верхнем левом углу маленькую черную метку размером с булавочную головку. Чтобы прямоугольник имел любой размер, скажем, примерно 1/4 холста, необходимо настроить следующие параметры:

ctx.fillRect(0,0,200,200);

Итак, как изменился масштаб этого холста? Да, я думаю, я мог бы «уменьшить масштаб» до чего-то вроде нормального, но я хотел бы выяснить, что в первую очередь вызывает это. Я отключил JQuery, думая, что это может как-то мешать, но это не помогло.

Любые идеи?

ОБНОВЛЕНИЕ:

Холст добавляется к домику в следующих строках:

<canvas id='foo_" + self.groupIndex + "' class='hCanvasClassName'>"

при этом CSS определяет ширину на уровне 100%, а высота назначается кодом JS.


canvas scale html
person mjk    schedule 11.06.2013    source источник
comment
Вы определили размер холста на элементе холста или с помощью CSS?   -  person    schedule 11.06.2013

Ответы (1)


arrow_upward
6
arrow_downward

Вы не показали код для этого, но это звучит так, как будто вы применили размер холста с помощью CSS, а не непосредственно на элементе, что объясняет, почему он уменьшается.

Вам нужно сделать это:

<canvas width="30" height="30" id="myCanvas"></canvas>

Если вы сделали это:

<canvas style="width:30px;height;30px;" id="myCanvas"></canvas>

произойдет то, что элемент холста будет использовать размер по умолчанию (300x150, см. здесь: http://jsfiddle.net/AbdiasSoftware/CfMNf/), а затем вы уменьшаете его до 30x30 с помощью css, что означает, что все, что теперь нарисовано на холсте, будет соответственно масштабировано.

person Community    schedule 11.06.2013
comment
Спасибо, Кен. Я искал масштаб холста по умолчанию, но почему-то пропустил размер холста по умолчанию. Отвечая на ваш вопрос, я обновил исходный пост. Высота была установлена, как вы предлагаете, но ширина была установлена ​​с помощью CSS на 100%, которая теперь рассчитывается вручную, и все работает так, как и следовало ожидать. Спасибо за вашу помощь. С Уважением. - person mjk; 11.06.2013
comment
Я знаю, что этому ответу уже три года, и я нашел этот ответ очень полезным, поскольку похожая проблема сводила меня с ума. Но .. может ли кто-нибудь объяснить или указать мне на объяснение логики этого способа? И есть ли способ изменить размер холста, кроме атрибутов элемента, без необходимости отдельно изменять масштаб? - person Jon Carter; 13.07.2016