Вопрос по html5, height, canvas – сделать высоту холста автоматически

1

У меня есть холст


Он отлично работает на Chrome и Firefox. Однако, т.е. может работать только с шириной: 100%, но не может изменить высоту (высота на 679)

Я стараюсь, чтобы высота была на авто и 100%, но я проснулся

Редактировать: наконец-то! Я понял. Это'Это правда, что содержание холста будет не очень хорошим при ширине 100%. Тем не менее, для высоты (IE9 выше это работа) вы должны установить стиль высоты

$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');

И использовать Jquery, чтобы изменить размер холста

function resizeIE()
{
  canvas = document.getElementById("canvas");
  if($.browser.msie) //only IE
  {
    $("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first

    if(window.innerWidth
@ user1128331 Удалено ваше редактирование. Дон»Близко в тему. Люди используют свое время, чтобы помочь вам, поэтому, пожалуйста, рассмотрите решение, представленное ниже. Если вы нашли решение самостоятельно, вы можете опубликовать это как ответ. Увидетьstackoverflow.com/help/self-answer user1693593
Вы не можете применить высоту, используя CSS? sajay
Спасибо, что рекомендую использовать CSS :) user1128331
@sajay Я добавляю CSS встроенный холст для высоты: 100% и высоты: авто. результат меньше и остается неизменным при изменении размера user1128331
@ user1128331 CSS плохо работает с холстами, поскольку растягивает холст. Смотри markE 'ответ тоже. user1693593

Ваш Ответ

2   ответа
2

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

Думайте об этом как о масштабировании изображения. Как и при изменении размера изображения .jpg, вы можете получить пиксели и искажения.

Вместо этого измените размер элемента canvasразмер с.

Думайте об этом как о добавлении большего количества пустых пикселей к ширине и высоте холста, а не как "растяжка» существующие пиксели.

Вот'Как добавить пиксели к элементу canvas, чтобы он стал 100% окна браузера:

var canvas=getElementById("myCanvas");
canvas.width= window.innerWidth;
canvas.height=window.innerHeight;

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

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

Спасибо, я думаю, что это действительно должно быть помечено как ответ - в сочетании с событием window.onresize, вышеупомянутое решение markE - это то, что большинству людей на самом деле нужно для полноэкранного холста. Это неНе имеет смысла устанавливать canvas.style.height как OP 'Ваш собственный ответ показывает, потому что выв итоге получится размытое и искаженное полотно. unenthusiasticuser
Я делаю SWF и конвертировать с экспортом CreateJS, поэтому я нене знаю, как перерисовать содержимое. user1128331
Спасибо, что помогаете мне на canvas.width и canvas.height user1128331
с этимadobe.com/products/flash/flash-to-html5.html user1128331
0
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');

И использовать Jquery, чтобы изменить размер холста

function resizeIE()
{
canvas = document.getElementById("canvas");
  if($.browser.msie) //only IE
  {
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first

if(window.innerWidth

Похожие вопросы