Leinwandbreite und -höhe in HTML5

181

Ist es möglich, die Breite und Höhe eines HTML5- canvasElements festzulegen ?

Der übliche Weg ist der folgende:

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

html canvas

— Dustin
quelle

379

Die canvasDOM - Element hat , .heightund .widthEigenschaften , die entsprechen den height="…"und width="…"Attributen. Setzen Sie sie im JavaScript-Code auf numerische Werte, um die Größe Ihrer Zeichenfläche zu ändern. Beispielsweise:

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

Beachten Sie, dass dies die Leinwand löscht, obwohl Sie mit folgen sollten ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); , um die Browser zu behandeln, die die Zeichenfläche nicht vollständig löschen. Sie müssen alle Inhalte neu zeichnen, die nach der Größenänderung angezeigt werden sollen.

Es sei weiter bemerkt , dass die Höhe und Breite sind die logische Leinwand Maße verwenden zum Ziehen und ist verschieden von den style.heightund style.widthCSS Attributen. Wenn Sie die CSS-Attribute nicht festlegen, wird die intrinsische Größe der Zeichenfläche als Anzeigegröße verwendet. Wenn Sie die CSS-Attribute festlegen und diese sich von den Canvas-Abmessungen unterscheiden, wird Ihr Inhalt im Browser skaliert. Beispielsweise:

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

Sehen Sie sich dieses Live-Beispiel einer Leinwand an, die um das Vierfache vergrößert wird.

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

— Phrogz
quelle

1

@Hazaart Wenn Sie sie anders festlegen möchten: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});Wenn die visuelle Größe der Pixelgröße entsprechen soll, legen Sie niemals die Stile, sondern nur die Attribute fest.

— Phrogz

1

"Wenn Sie möchten, dass die visuelle Größe mit der Pixelgröße übereinstimmt, legen Sie niemals die Stile, sondern nur die Attribute fest", gibt es einen Grund für diese Einstellung? Wenn ich viele Objekte auf der Leinwand habe und zoomin / zoomout möchte, wäre es viel schneller, nur das CSS zurückzusetzen, nein? (Anstatt alle Objekte zu durchlaufen) ...

— EnglishAdam

3

@Gamemorize: Durch Zoomen über CSS wird es verschwommen. Sie können jedoch über Kontextskalierung und Übersetzung zwischen dem Neuzeichnen zoomen, anstatt die Größe jedes Objekts zu ändern.

— Phrogz

1

Vielen Dank. Ich sehe jetzt, was CSS tut ... es behandelt die Leinwand "wie" ein Bild, das Skalieren eines Bildes ist offensichtlich nicht so gut wie das "Neuzeichnen"!

— EnglishAdam

3

Außerdem können Sie jetzt "pixeliges Vergrößern löschen" anstelle von "verschwommenes pixeliges Vergrößern" ausführen, zumindest in Chrome, indem Sie den Stil "Bildwiedergabe: pixeliert" auf der Leinwand verwenden. Ich habe an Ihrer Geige herumgespielt

— Don Hatch

62

Eine Leinwand hat zwei Größen, die Größe der Pixel in der Leinwand (Backingstore oder DrawingBuffer) und die Anzeigegröße. Die Anzahl der Pixel wird mithilfe der Canvas-Attribute festgelegt. In HTML

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

Oder in JavaScript

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

Davon getrennt sind die Breite und Höhe des CSS-Stils der Leinwand

In CSS

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

Oder in JavaScript

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

Der wohl beste Weg, eine Leinwand mit 1x1 Pixel zu erstellen, besteht darin, IMMER CSS zu verwenden zu verwenden, um die Größe auszuwählen, und dann ein kleines Stück JavaScript zu schreiben, damit die Anzahl der Pixel dieser Größe entspricht.

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

Warum ist das der beste Weg? Weil es in den meisten Fällen funktioniert, ohne dass Code geändert werden muss.

Hier ist eine vollständige Fensterfläche:

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Und hier ist eine Leinwand als Float in einem Absatz

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Hier ist eine Leinwand in einem großen Bedienfeld

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Hier ist eine Leinwand als Hintergrund

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Da ich die Attribute nicht festgelegt habe, hat sich in jedem Beispiel nur das CSS geändert (was die Zeichenfläche betrifft).

Anmerkungen:

Setzen Sie keine Ränder oder Auffüllungen auf ein Canvas-Element. Das Berechnen der Größe zum Subtrahieren von der Anzahl der Dimensionen des Elements ist mühsam

— gman
quelle

Beste Antwort, dieses Snippet sollte eine Standard-DOM-Canvas-Methode sein.

— Rustypaper

23

Vielen Dank! Schließlich habe ich das Problem mit unscharfen Pixeln mit diesem Code gelöst:

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

Mit dem Hinzufügen des 'halben Pixels' wird der Trick gelöst, um Linien zu verwischen.

— user1463699
quelle

26

@UpTheCreek Wenn Sie eine Linie in der Leinwand zeichnen, sieht sie besser aus, als wenn sie unscharf wäre. Wenn Sie die Linien auf halbe Pixel setzen (z. B. 50,5 statt 50), erhalten Sie eine schöne, saubere Linie. Dies geschieht häufig mit ctx.translate (0.5, 0.5) ganz am Anfang Ihres Codes, damit Sie es später vergessen können

— Johan

-2

Der beste Weg, es zu tun:

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

— Rohan Parab
quelle