Как изменить размер холста с помощью JavaScript?

Как можно сделать холст JavaScript (или как называется область рисования размером 400 на 400 пикселей) больше, чем 400x400?

У меня экран 1440p, и когда я запускаю свои файлы JS через файл HTML, не удивительно, что холст - это маленький блок размером 400 на 400 пикселей в левом верхнем углу.

Могу ли я что-нибудь сделать, чтобы расширить холст до указанной высоты и ширины?

Источник

5 ответов

Решение

Следующий jsfiddle демонстрирует, как изменить размер холста. https://jsfiddle.net/intrinsica/msj0cwx3/

(function() {
  var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d');

  // Event handler to resize the canvas when the document view is changed
  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Redraw everything after resizing the window
    drawStuff(); 
  }
  resizeCanvas();

  function drawStuff() {
    // Do drawing here
    context.strokeRect(10,10, 230,100);
    context.font = '16px serif';
    context.fillText('The canvas is the blue', 30, 30);
    context.fillText('background color seen here.', 30, 50);
    context.fillText('It will resize if the window', 30, 70);
    context.fillText('size is adjusted.', 30, 90);
  }
})();

Источник

Вы объявляете холст через HTML? Если вы, вы можете использовать:

<canvas id="myCanvas" width="1400" height="900"></canvas>

Если вы хотите изменить размер с помощью Javascript, вы можете использовать:

<script type="text/javascript">
    document.getElementById('myCanvas').height = 800;
    document.getElementById('myCanvas').width = window.innerWidth;
</script>
Источник

Поскольку Javascript, возможно, собирается игнорировать CSS, попробуйте установить ширину и высоту холста в javascript и CSS, например, я хочу, чтобы мой холст имел ширину 650px и высоту 750px, если ваш идентификатор называется canvas, а также добавил ширина и высота в теге canvas

canvas.width = 650px;
canvas.height = 750px;
Источник

Элемент canvas похож на любой стандартный объект DOM. Поэтому вы можете изменить размер холста, используя стандартный CSS:

<canvas />
<style>
canvas {
  width: 100%;
  min-height: 400px;
}
</style>

https://jsfiddle.net/z3pL9qp9/

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

Источник

Если вы используете Processing.JS для своего проекта, я мог бы помочь. Я не уверен, работает ли он на обычном JavaScript. Хотя стоит попробовать

size(screenHeight, screenWidth);

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

var screenSizeH = screen.height;

ИЛИ ЖЕ

var screenSizeW = screen.width;

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

Способ обойти это - умножить все, что вам нужно, в масштабе.

var scaless = screenSize/400;

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

Источник
Другие вопросы по тегам