HTML5'te tuval genişliği ve yüksekliği

181

Bir HTML5 canvasöğesinin genişliğini ve yüksekliğini düzeltmek mümkün mü ?

Olağan yol şudur:

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

html canvas

— Dustin
kaynak

380

canvasDOM öğesi vardır .heightve .widthhiç özelliklerinin olduğunu uyumluluğunu height="…"ve width="…"nitelikler. Tuvalinizi yeniden boyutlandırmak için bunları JavaScript kodundaki sayısal değerlere ayarlayın. Örneğin:

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

Bu tuvali temizler, ancak bunu takip etmelisiniz ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); tamamen temizlemeyen tarayıcıları ele . Boyut değişikliğinden sonra görüntülenmesini istediğiniz içeriği yeniden çizmeniz gerekir.

Ayrıca, yükseklik ve genişliğin çizim için kullanılan mantıksal kanvas boyutları olduğunu ve ve CSS niteliklerinden farklı olduğunu unutmayın . CSS niteliklerini ayarlamazsanız, tuvalin gerçek boyutu görüntü boyutu olarak kullanılır; CSS niteliklerini ayarlarsanız ve bunlar tuval boyutlarından farklıysa, içeriğiniz tarayıcıda ölçeklendirilir. Örneğin:style.heightstyle.width

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

4x oranında yakınlaştırılmış bir tuvalin bu canlı örneğine bakın .

Kod snippet'ini göster

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>

Snippet'i genişlet

— Phrogz
kaynak

1

@Hazaart Onları farklı ayarlamak istiyorsanız: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});Görsel boyutun piksel boyutuyla aynı olmasını istiyorsanız, stilleri asla ayarlamayın, yalnızca nitelikleri ayarlayın.

— Phrogz

1

"Görsel boyutun piksel boyutuyla aynı olmasını istiyorsanız, asla stilleri, yalnızca nitelikleri ayarlamayın", bu tercihin bir nedeni var mı? ? Ben tuval birçok nesneleri var ve zoomin / ZoomOut, çok daha hızlı olacaktır istiyorsanız, sadece css, hayır ... (daha doğrusu tüm nesneler arasında döngü yerine) reset

— EnglishAdam

3

@Gamemorize: CSS ile yakınlaştırma, görüntüyü bulanıklaştırır. Ancak, her nesnenin 'boyutunu' değiştirmek yerine bağlam ölçekleme ve yeniden çizim arasında çeviri yoluyla yakınlaştırma yapabilirsiniz.

— Phrogz

1

Teşekkürler çok takdir. Şimdi CSS'nin ne yaptığını görüyorum ... tuvali bir görüntüye 'benziyor' gibi davranıyor, görüntüyü ölçeklendirmek açıkça 'yeniden çizmek' kadar iyi değil!

— EnglishAdam

3

Ayrıca, tuvalde "görüntü oluşturma: pikselli" stilini kullanarak artık en azından Chrome'da "bulanık pikselli yakınlaştırma" yerine "net pikselli yakınlaştırma" yapabilirsiniz. Farkı göstermek için kemanını oynadım: jsfiddle.net/donhatch/9bheb/1663

— Don Hatch

62

Bir tuvalin 2 boyutu, tuvaldeki piksellerin boyutu (arka mağaza veya drawingBuffer) ve ekran boyutu vardır. Piksel sayısı, tuval özellikleri kullanılarak ayarlanır. HTML'de

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

Veya JavaScript'te

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

Bundan ayrı olarak, tuvalin CSS stili genişliği ve yüksekliği

CSS'de

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

Veya JavaScript'te

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

Tuval 1x1 piksel yapmanın tartışmasız en iyi yolu , boyutu seçmek için DAİMA CSS KULLANMAK ve piksel sayısını bu boyuta ulaştırmak için küçük bir JavaScript yazmasıdır.

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

Neden bu en iyi yol? Çünkü çoğu durumda herhangi bir kodu değiştirmek zorunda kalmadan çalışır.

İşte tam bir pencere tuvali:

Kod snippet'ini göster

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>

Snippet'i genişlet

Ve işte bir paragrafta şamandıra olarak bir tuval

Kod snippet'ini göster

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>

Snippet'i genişlet

İşte oldukça büyük bir kontrol panelinde bir tuval

Kod snippet'ini göster

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>

Snippet'i genişlet

arka plan olarak bir tuval

Kod snippet'ini göster

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>

Snippet'i genişlet

Nitelikleri ayarlamadığım için her örnekte değişen tek şey CSS'dir (tuval söz konusu olduğunda)

Notlar:

Bir tuval elemanına kenarlık veya dolgu koymayın. Elemanın boyut sayısından çıkarılacak boyutu hesaplamak zahmetlidir

— gman
kaynak

En iyi cevap, bu snippet'in standart bir DOM tuval yöntemi olması gerekir.

— Rustypaper

23

Çok teşekkür ederim! Sonunda bu kod ile bulanık piksel sorunu çözüldü:

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

'Yarım piksel' ilavesi ile çizgileri bulanıklaştırma hile yapar.

— user1463699
kaynak

26

@UpTheCreek Tuvalde bir çizgi çizerseniz, daha bulanık görünüyor, sanki bulanık görünüyor. Çizgileri yarım piksele (örneğin 50 yerine 50,5) koyarak güzel, temiz bir çizgi elde edersiniz. Bu genellikle kodunuzun en başında ctx.translate (0.5, 0.5) kullanılarak yapılır, böylece daha sonra unutabilirsiniz

— Johan

-2

Bunu yapmanın en iyi yolu:

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

— rohan parab
kaynak