увеличение холста до родительской ширины и высоты - PullRequest
1 голос
/ 25 августа 2011

Я пытаюсь нарисовать некоторые фигуры на холсте HTML5, используя Javascript.

Когда ширина и высота холста имеют жестко заданный размер, например, 800x600, все работает нормально.

То, что я хотел бы сделать, это растянуть ширину холста, чтобы соответствовать родительскому элементу (размер родительского элемента может быть любым).Когда я применяю свойства CSS: width: 100% и height: 100%, нарисованные фигуры начинаются с точки, отличной от той, что на самом деле должна быть.

Пример того, над чем я работаю, приведен вэта ссылка: http://jsfiddle.net/jR4ne/

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

Ответы [ 2 ]

0 голосов
/ 25 августа 2011

Похоже, холст инициализируется слишком рано, до того, как он был изменен до ширины 100%: нарисованные прямоугольники также отображаются в растянутом режиме. Я бы предложил поместить код инициализации в функцию загрузки, например,

<body onload="setupCanvas()">

или с помощью jQuery:

$( function() { setupCanvas(); } );

Я бы также предложил удалить атрибуты width / height из HTML (не уверен, что они там временно, так как css width 100% не работает?)

0 голосов
/ 25 августа 2011

В вашем случае вам не следует использовать CSS для изменения размера.Вы должны указать ширину и высоту в пикселях для Canvas.Вы можете добавить приведенный ниже код в свой JS (), и он будет соответствовать вашим требованиям:

canvasNode.width = document.body.scrollWidth;
canvasNode.height = document.body.scrollHeight;

Конечно, ваш родитель может относиться к разным вещам, вам необходимо соответствующим образом изменить ширину и высоту.Пожалуйста, обратитесь сюда для получения дополнительной информации: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...