Largura e altura da tela em HTML5

181

É possível corrigir a largura e a altura de um HTML5 canvas elemento ?

A maneira usual é a seguinte:

<canvas id="canvas" width="300" height="300"></canvas>
Dustin
fonte

Respostas:

380

O canvaselemento tem DOM .heighte .widthpropriedades que correspondem a height="…"e width="…"atributos. Defina-os para valores numéricos no código JavaScript para redimensionar sua tela. Por exemplo:

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

Observe que isso limpa a tela, embora você deva seguir com ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); para lidar com os navegadores que não limpam completamente a tela. Você precisará redesenhar qualquer conteúdo que desejasse exibir após a alteração do tamanho.

Observe ainda que a altura e a largura são as dimensões lógicas da tela usadas para desenhar e são diferentes dos atributos style.heighte style.widthCSS. Se você não definir os atributos CSS, o tamanho intrínseco da tela será usado como tamanho de exibição; se você definir os atributos CSS e eles diferirem das dimensões da tela, seu conteúdo será redimensionado no navegador. Por exemplo:

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width  = '800px';
canvas.style.height = '600px';

Veja este exemplo ao vivo de uma tela com zoom de 4x.

Phrogz
fonte
1
@ Hazaart Se você quiser defini-los de maneira diferente: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});Se você quiser que o tamanho visual seja igual ao tamanho do pixel, nunca defina os estilos, apenas os atributos.
Phrogz
1
"Se você deseja que o tamanho visual seja igual ao tamanho do pixel, nunca defina os estilos, apenas os atributos", existe um motivo para essa preferência? Se eu tiver muitos objetos na tela e eu quero zoomin / zoomout, seria muito mais rápido apenas para repor o css, não (ao invés de percorrer todos os objetos) ...?
EnglishAdam
3
@ Gamemorize: o zoom via CSS o torna embaçado. No entanto, você pode aumentar o zoom via escala de contexto e tradução entre redesenho em vez de alterar o 'tamanho' de cada objeto.
Phrogz
1
Thx muito apreciado. Vejo agora o que o CSS está fazendo ... trata a tela 'como' uma imagem, dimensionar uma imagem obviamente não é tão boa quanto 'redesenha-la'!
EnglishAdam
3
Além disso, agora você pode "aumentar o zoom pixelizado" em vez de "aumentar o zoom pixelizado", pelo menos no Chrome, usando o estilo "renderização de imagem: pixelizada" na tela. Eu brincava seu violino para mostrar a diferença: jsfiddle.net/donhatch/9bheb/1663
Don escotilha
62

Uma tela tem 2 tamanhos, a dimensão dos pixels na tela (é backingstore ou drawingBuffer) e o tamanho da exibição. O número de pixels é definido usando os atributos da tela. Em HTML

<canvas width="400" height="300"></canvas>

Ou em JavaScript

someCanvasElement.width = 400;
someCanvasElement.height = 300;

Além disso, são a largura e a altura do estilo CSS da tela

Em CSS

canvas {  /* or some other selector */
   width: 500px;
   height: 400px;
}

Ou em JavaScript

canvas.style.width = "500px";
canvas.style.height = "400px";

A melhor maneira de criar uma tela de pixels de 1 x 1 é SEMPRE USAR CSS para escolher o tamanho e escrever um pouquinho de JavaScript para fazer com que o número de pixels corresponda a esse tamanho.

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

Por que esse é o melhor caminho? Porque funciona na maioria dos casos sem precisar alterar nenhum código.

Aqui está uma tela cheia da janela:

E aqui está uma tela como um flutuador em um parágrafo

Aqui está uma tela em um painel de controle considerável

aqui está uma tela como pano de fundo

Como não defini os atributos, a única coisa que mudou em cada amostra é o CSS (no que diz respeito à tela)

Notas:

  • Não coloque bordas ou preenchimentos em um elemento da tela. Computar o tamanho para subtrair do número de dimensões do elemento é problemático
gman
fonte
Melhor resposta, esse snippet deve ser um método de tela DOM padrão.
rustypaper
23

Muito obrigado! Finalmente, resolvi o problema de pixels borrados com este código:

<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>

Com a adição do 'meio pixel', o truque é desfocar as linhas.

user1463699
fonte
26
@UpTheCreek Se você desenhar uma linha na tela, ela parecerá marcada, como deveria estar borrada. Ao colocar as linhas em meio pixel (digamos, 50,5 em vez de 50), você obtém uma linha agradável e limpa. Isso geralmente é feito usando ctx.translate (0,5, 0,5), no início do seu código para que você pode esquecê-lo depois
Johan
-2

A melhor maneira de fazer isso:

<canvas id="myChart" style="height: 400px; width: 100px;"></canvas>
Rohan Parab
fonte