Измените размер холста HTML5 для установки окну

Как я могу автоматически масштабировать HTML5 <canvas> элемент для установки странице?

Например, я могу получить a <div> масштабироваться путем установки height и width свойства к 100%, но a <canvas> не масштабируется, не так ли?

382
задан gman 20 July 2019 в 17:36
поделиться

3 ответа

Во-первых, вы не можете использовать атрибуты width и height, чтобы изменить размер (по крайней мере, с моей точки зрения), потому что это сломает его. Вы можете сделать это: HTML:

<canvas id = 'myCanvas'></canvas>

JS:

var canvas = document.getElementById('myCanvas');

var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

(Пожалуйста, прости меня за любые опечатки, я склонен делать это много)

-1
ответ дан 16 September 2019 в 22:02
поделиться

Если ваш div полностью заполнил веб-страницу, вы можете заполнить этот div и получить холст, который заполняет div.

Это может показаться вам интересным, так как вам может потребоваться использовать css для использования процента, но это зависит от того, какой браузер вы используете, и насколько он соответствует спецификации: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Внутренние размеры холста элемент равен размеру координатное пространство, с числами интерпретируется в пикселях CSS. Однако, размер элемента может быть произвольным таблицей стилей. Во время рендеринга изображение масштабируется, чтобы соответствовать этому макету size.

Вам может потребоваться получить offsetWidth и высоту div или получить высоту / ширину окна и установить их в качестве значения пикселя.

4
ответ дан 22 November 2019 в 23:53
поделиться

Unless you want the canvas to upscale your image data automatically (that's what James Black's answer talks about, but it won't look pretty), you have to resize it yourself and redraw the image. Centering a canvas

8
ответ дан 22 November 2019 в 23:53
поделиться
Другие вопросы по тегам:

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