Larghezza e altezza della tela in HTML5

181

È possibile correggere la larghezza e l'altezza di un canvaselemento HTML5 ?

Il solito modo è il seguente:

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

html canvas

— Dustin
fonte

380

L' canvaselemento DOM ha .heighte .widthproprietà che corrispondono agli attributi height="…"e width="…". Impostali su valori numerici nel codice JavaScript per ridimensionare la tela. Per esempio:

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

Si noti che questo cancella la tela, anche se è necessario seguire ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);per gestire quei browser che non cancellano completamente la tela. Dovrai ridisegnare tutti i contenuti che volevi visualizzare dopo la modifica delle dimensioni.

Si noti inoltre che l'altezza e la larghezza sono le dimensioni logiche dell'area di disegno utilizzate per il disegno e sono diverse dagli attributi CSS style.heighte style.width. Se non imposti gli attributi CSS, la dimensione intrinseca dell'area di disegno verrà utilizzata come dimensione di visualizzazione; se imposti gli attributi CSS e differiscono dalle dimensioni della tela, i tuoi contenuti verranno ridimensionati nel browser. Per esempio:

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

Guarda questo esempio dal vivo di una tela ingrandita di 4x.

Mostra snippet di codice

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>

Espandi frammento

— Phrogz
fonte

1

@Hazaart Se si desidera impostarli in modo diverso: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});se si desidera che la dimensione visiva sia uguale alla dimensione in pixel, non impostare mai gli stili, ma solo gli attributi.

— Phrogz,

1

"Se vuoi che la dimensione visiva sia uguale alla dimensione dei pixel, non impostare mai gli stili, ma solo gli attributi", c'è un motivo per questa preferenza? Se Ho molti oggetti nella tela e voglio Zoomin / ZoomOut, sarebbe molto più veloce per appena ripristinare il css, no (invece di scorrere tutti gli oggetti) ...?

— EnglishAdam

3

@Gamemorize: lo zoom tramite CSS lo rende sfocato. Tuttavia, è possibile eseguire lo zoom tramite ridimensionamento del contesto e traduzione tra ridisegno invece di modificare le "dimensioni" di ciascun oggetto.

— Phrogz,

1

Grazie molto apprezzato. Vedo ora cosa sta facendo CSS ... tratta la tela "come" un'immagine, ridimensionare un'immagine non è ovviamente buono come "ridisegnarla"!

— EnglishAdam

3

Inoltre, ora puoi fare "cancella ingrandimento pixelato" invece di "ingrandimento pixel sfocato", almeno su Chrome, usando lo stile "rendering immagine: pixelato" sulla tela. Ho suonato il violino per mostrare la differenza: jsfiddle.net/donhatch/9bheb/1663

— Don Hatch

62

Una tela ha 2 dimensioni, la dimensione dei pixel nella tela (è backingstore o drawingBuffer) e la dimensione di visualizzazione. Il numero di pixel viene impostato utilizzando gli attributi canvas. In HTML

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

O in JavaScript

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

A parte ciò ci sono la larghezza e l'altezza dello stile CSS della tela

Nel CSS

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

O in JavaScript

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

Il modo migliore per creare una tela 1x1 pixel è UTILIZZARE SEMPRE i CSS per scegliere la dimensione, quindi scrivere un po 'di JavaScript per far corrispondere il numero di pixel a quella dimensione.

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

Perché è questo il modo migliore? Perché funziona nella maggior parte dei casi senza dover modificare alcun codice.

Ecco una tela a finestra intera:

Mostra snippet di codice

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>

Espandi frammento

Ed ecco una tela come galleggiante in un paragrafo

Mostra snippet di codice

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>

Espandi frammento

Ecco una tela in un pannello di controllo considerevole

Mostra snippet di codice

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>

Espandi frammento

ecco una tela come sfondo

Mostra snippet di codice

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>

Espandi frammento

Perché non ho impostato gli attributi, l'unica cosa che è cambiata in ogni campione è il CSS (per quanto riguarda la tela)

Appunti:

Non mettere bordi o imbottiture su un elemento di tela. Calcolare la dimensione da sottrarre dal numero di dimensioni dell'elemento è problematico

— gman
fonte

La migliore risposta, questo frammento dovrebbe essere un metodo di tela DOM standard.

— Rustypaper,

23

Grazie mille! Alla fine ho risolto il problema dei pixel sfocati con questo codice:

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

Con l'aggiunta del "mezzo pixel" si risolvono le linee.

— user1463699
fonte

26

@UpTheCreek Se si disegna una linea su tela, sembra ticker quindi dovrebbe, come se fosse sfocata. Mettendo le linee su mezzo pixel (diciamo 50.5 anziché 50) si ottiene una linea pulita e piacevole. Questo è spesso fatto usando ctx.translate (0,5, 0,5) all'inizio del codice, in modo da poterlo dimenticare in seguito

— Johan,

-2

Il modo migliore per farlo:

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

— rohan parab
fonte