Szerokość i wysokość płótna w HTML5

181

Czy można naprawić szerokość i wysokość canvaselementu HTML5 ?

Zwykły sposób jest następujący:

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

html canvas

— Dustin
źródło

380

Element canvasDOM ma .heighti .widthwłaściwości, które odpowiadają atrybutom height="…"i width="…". Ustaw je na wartości liczbowe w kodzie JavaScript, aby zmienić rozmiar płótna. Na przykład:

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

Pamiętaj, że ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);spowoduje to wyczyszczenie obszaru roboczego, ale należy postępować zgodnie z tymi przeglądarkami, które nie usuwają całkowicie obszaru roboczego. Po zmianie rozmiaru konieczne będzie przerysowanie treści, które mają być wyświetlane.

Zauważ też, że wysokość i szerokość są logicznymi wymiarami płótna używanymi do rysowania i różnią się od atrybutów style.heighti style.widthCSS. Jeśli nie ustawisz atrybutów CSS, rzeczywisty rozmiar płótna zostanie użyty jako jego rozmiar wyświetlania; jeśli ustawisz atrybuty CSS i różnią się one od wymiarów obszaru roboczego, zawartość zostanie przeskalowana w przeglądarce. Na przykład:

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

Zobacz ten przykład na żywo płótna powiększonego 4x.

Pokaż fragment kodu

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>

Rozwiń fragment kodu

— Phrogz
źródło

1

@Hazaart Jeśli chcesz ustawić je inaczej: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});Jeśli chcesz, aby rozmiar wizualny był taki sam jak rozmiar w pikselach, nigdy nie ustawiaj stylów, tylko atrybuty.

— Phrogz

1

„Jeśli chcesz, aby rozmiar wizualny był taki sam jak rozmiar w pikselach, nigdy nie ustawiaj stylów, tylko atrybuty”, czy istnieje powód tej preferencji? Jeśli mam wiele obiektów w obszarze roboczym i chcę powiększyć / pomniejszyć, znacznie szybciej byłoby zresetować css, nie? (Zamiast przechodzić przez wszystkie obiekty) ...

— EnglishAdam

3

@ Gamemorize: powiększanie za pomocą CSS powoduje, że jest rozmazany. Można jednak powiększać za pomocą skalowania kontekstu i translacji między przerysowaniem zamiast zmieniać „rozmiar” każdego obiektu.

— Phrogz

1

Dziękuję bardzo. Widzę teraz, co robi CSS ... traktuje płótno „jak” obraz, skalowanie obrazu oczywiście nie jest tak dobre jak „ponowne rysowanie”!

— EnglishAdam

3

Ponadto możesz teraz „wyczyścić powiększone piksele” zamiast „rozmyte powiększone piksele”, przynajmniej w Chrome, używając stylu „renderowanie obrazu: piksele” na płótnie. Skrzypną twoje skrzypce, aby pokazać różnicę: jsfiddle.net/donhatch/9bheb/1663

— Don Hatch

62

Płótno ma 2 rozmiary, rozmiar pikseli w kanwie (jest to backststore lub drawingBuffer) i rozmiar wyświetlania. Liczbę pikseli ustawia się za pomocą atrybutów canvas. W HTML

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

Lub w JavaScript

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

Oddzielne są szerokość i wysokość stylu CSS płótna

W CSS

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

Lub w JavaScript

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

Prawdopodobnie najlepszym sposobem na wykonanie płótna 1x1 pikseli jest ZAWSZE STOSOWANIE CSS, aby wybrać rozmiar, a następnie napisanie odrobiny kodu JavaScript, aby liczba pikseli pasowała do tego rozmiaru.

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

Dlaczego to najlepszy sposób? Ponieważ działa w większości przypadków bez konieczności zmiany kodu.

Oto płótno w pełnym oknie:

Pokaż fragment kodu

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>

Rozwiń fragment kodu

A oto płótno jak pływak w akapicie

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Oto płótno w sporym panelu sterowania

Pokaż fragment kodu

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>

Rozwiń fragment kodu

oto płótno jako tło

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Ponieważ nie ustawiłem atrybutów, jedyną rzeczą, która zmieniła się w każdej próbce jest CSS (jeśli chodzi o płótno)

Uwagi:

Nie nakładaj ramek ani obicia na element płótna. Obliczanie wielkości do odjęcia od liczby wymiarów elementu jest kłopotliwe

— gman
źródło

Najlepsza odpowiedź, ten fragment powinien być standardową metodą kanwy DOM.

— Rustypaper

23

Dziękuję Ci bardzo! Wreszcie rozwiązałem problem rozmytych pikseli za pomocą tego kodu:

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

Po dodaniu „półpiksela” można odblokować linie.

— użytkownik1463699
źródło

26

@UpTheCreek Jeśli narysujesz linię w obszarze roboczym, będzie ona wyglądała na paskudną, a następnie powinna, jakby była rozmyta. Umieszczając linie na pół pikselach (powiedzmy 50,5 zamiast 50), otrzymujesz ładną, czystą linię. Często odbywa się to za pomocą ctx.translate (0,5, 0,5) na samym początku kodu, abyś mógł później o nim zapomnieć

— Johan

-2

Najlepszy sposób to zrobić:

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

— Rohan Parab
źródło