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>

html canvas

— Dustin
fonte

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.

Mostrar snippet de código

var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth   = 1;
ctx.strokeStyle = '#f00';
ctx.fillStyle   = '#eff';

ctx.fillRect(  10.5, 10.5, 20, 20 );
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.fillRect(   40, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.fillRect(   70, 10, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

ctx.strokeStyle = '#fff';
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

body { background:#eee; margin:1em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }

<canvas width="100" height="40"></canvas>
<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>

Expandir snippet

— 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:

Mostrar snippet de código

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);
 
  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width / spacing + 1;
  const down = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y < down; ++y) {
    for (let x = 0; x < across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

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;
}

body { margin: 0; }
canvas { display: block; width: 100vw; height: 100vh; }

<canvas id="c"></canvas>

Expandir snippet

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

Mostrar snippet de código

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);
 
  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width  / spacing + 1;
  const down   = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y <= down; ++y) {
    for (let x = 0; x <= across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

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;
}

span { 
   width: 250px; 
   height: 100px; 
   float: left; 
   padding: 1em 1em 1em 0;
   display: inline-block;
}
canvas {
   width: 100%;
   height: 100%;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim <span class="diagram"><canvas id="c"></canvas></span>
vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
<br/><br/>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>

Expandir snippet

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

Mostrar snippet de código

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);

  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width / spacing + 1;
  const down = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y < down; ++y) {
    for (let x = 0; x < across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

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;
}

// ----- the code above related to the canvas does not change ----
// ---- the code below is related to the slider ----
const $ = document.querySelector.bind(document);
const left = $(".left");
const slider = $(".slider");
let dragging;
let lastX;
let startWidth;

slider.addEventListener('mousedown', e => {
 lastX = e.pageX;
 dragging = true;
});

window.addEventListener('mouseup', e => {
 dragging = false;
});

window.addEventListener('mousemove', e => {
  if (dragging) {
    const deltaX = e.pageX - lastX;
    left.style.width = left.clientWidth + deltaX + "px";
    lastX = e.pageX;
  }
});

body { 
  margin: 0;
}
.frame {
  display: flex;
  align-items: space-between;
  height: 100vh;
}
.left {
  width: 70%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}  
canvas {
  width: 100%;
  height: 100%;
}
pre {
  padding: 1em;
}
.slider {
  width: 10px;
  background: #000;
}
.right {
  flex 1 1 auto;
}

<div class="frame">
  <div class="left">
     <canvas id="c"></canvas>
  </div>
  <div class="slider">
  
  </div>
  <div class="right">
     <pre>
* controls
* go 
* here

&lt;- drag this
     </pre>
  </div>
</div>

Expandir snippet

aqui está uma tela como pano de fundo

Mostrar snippet de código

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);
 
  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width / spacing + 1;
  const down = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y < down; ++y) {
    for (let x = 0; x < across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

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;
}

body { margin: 0; }
canvas { 
  display: block; 
  width: 100vw; 
  height: 100vh;  
  position: fixed;
}
#content {
  position: absolute;
  margin: 0 1em;
  font-size: xx-large;
  font-family: sans-serif;
  font-weight: bold;
  text-shadow: 2px  2px 0 #FFF, 
              -2px -2px 0 #FFF,
              -2px  2px 0 #FFF,
               2px -2px 0 #FFF;
}

<canvas id="c"></canvas>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
</p>
<p>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>
</div>

Expandir snippet

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