Ancho y alto del lienzo en HTML5

181

¿Es posible arreglar el ancho y la altura de un canvaselemento HTML5 ?

La forma habitual es la siguiente:

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

Respuestas:

380

El canvaselemento DOM tiene .heighty .widthpropiedades que corresponden a los atributos height="…"y width="…". Ajústelos a valores numéricos en el código JavaScript para cambiar el tamaño de su lienzo. Por ejemplo:

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

Tenga en cuenta que esto borra el lienzo, aunque debe seguir ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);para manejar los navegadores que no borran completamente el lienzo. Deberá volver a dibujar el contenido que desea que se muestre después del cambio de tamaño.

Tenga en cuenta además que la altura y el ancho son las dimensiones lógicas del lienzo utilizadas para dibujar y son diferentes de los atributos style.heighty style.widthCSS. Si no establece los atributos CSS, el tamaño intrínseco del lienzo se usará como su tamaño de visualización; si configura los atributos CSS y difieren de las dimensiones del lienzo, su contenido se escalará en el navegador. Por ejemplo:

// 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';

Vea este ejemplo en vivo de un lienzo que se amplía 4x.

Phrogz
fuente
1
@Hazaart Si desea configurarlos de manera diferente: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});si desea que el tamaño visual sea el mismo que el tamaño de píxel, nunca configure los estilos, solo los atributos.
Phrogz
1
"Si desea que el tamaño visual sea el mismo que el tamaño del píxel, nunca configure los estilos, solo los atributos", ¿hay alguna razón para esta preferencia? Si tengo muchos objetos en el lienzo y quiero acercar / alejar, sería mucho más rápido restablecer el CSS, ¿no? (En lugar de recorrer todos los objetos) ...
InglésAdam
3
@Gamemorize: el zoom a través de CSS lo hace borroso. Sin embargo, puede hacer zoom mediante la escala de contexto y la traducción entre redibujos en lugar de cambiar el "tamaño" de cada objeto.
Phrogz
1
Gracias muy apreciado. Ahora veo lo que CSS está haciendo ... trata el lienzo 'como' una imagen, escalar una imagen obviamente no es tan bueno como 'volver a dibujarla'.
InglésAdam
3
Además, ahora puede hacer un "acercamiento claro y pixelado" en lugar de "acercamiento borroso y pixelado", al menos en Chrome, usando el estilo "representación de imagen: pixelado" en el lienzo. Toqué tu violín para mostrar la diferencia: jsfiddle.net/donhatch/9bheb/1663
Don Hatch
62

Un lienzo tiene 2 tamaños, la dimensión de los píxeles en el lienzo (es backingstore o drawingBuffer) y el tamaño de visualización. El número de píxeles se establece utilizando los atributos del lienzo. En HTML

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

O en JavaScript

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

Separado de eso están el ancho y la altura del estilo CSS del lienzo

En CSS

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

O en JavaScript

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

La mejor manera de hacer un lienzo de 1x1 píxeles es SIEMPRE UTILIZAR CSS para elegir el tamaño y luego escribir un poco de JavaScript para que el número de píxeles coincida con ese tamaño.

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 qué es esta la mejor manera? Porque funciona en la mayoría de los casos sin tener que cambiar ningún código.

Aquí hay un lienzo de ventana completa:

Y aquí hay un lienzo como flotador en un párrafo

Aquí hay un lienzo en un panel de control considerable

aquí hay un lienzo como fondo

Como no configuré los atributos, lo único que cambió en cada muestra es el CSS (en lo que respecta al lienzo)

Notas:

  • No coloque bordes ni relleno en un elemento de lienzo. Calcular el tamaño a restar del número de dimensiones del elemento es problemático
gman
fuente
La mejor respuesta, este fragmento debe ser un método de lienzo DOM estándar.
rustypaper
23

¡Muchas gracias! Finalmente resolví el problema de píxeles borrosos con este código:

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

Con la adición del 'medio píxel', el truco es desenfocar líneas.

usuario1463699
fuente
26
@UpTheCreek Si dibuja una línea en el lienzo, se ve más oscura que debería, como si estuviera borrosa. Al poner las líneas en medio píxel (por ejemplo, 50.5 en lugar de 50) se obtiene una línea bonita y limpia. Esto a menudo se hace usando ctx.translate (0.5, 0.5) al comienzo de su código para que pueda olvidarse de él después
Johan
-2

La mejor manera de hacerlo:

<canvas id="myChart" style="height: 400px; width: 100px;"></canvas>
rohan parab
fuente