Lebar kanvas dan tinggi dalam HTML5

181

Apakah mungkin untuk memperbaiki lebar dan tinggi canvaselemen HTML5 ?

Cara yang biasa adalah sebagai berikut:

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

html canvas

— Dustin
sumber

380

The canvaselemen DOM memiliki .heightdan .widthsifat yang bersesuaian dengan height="…"dan width="…"atribut. Atur nilai numerik dalam kode JavaScript untuk mengubah ukuran kanvas Anda. Sebagai contoh:

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

Perhatikan bahwa ini menghapus kanvas, meskipun Anda harus mengikuti dengan ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);untuk menangani browser yang tidak sepenuhnya menghapus kanvas. Anda harus menggambar ulang konten yang Anda inginkan ditampilkan setelah perubahan ukuran.

Perhatikan lebih lanjut bahwa tinggi dan lebar adalah dimensi kanvas logis yang digunakan untuk menggambar dan berbeda dari style.heightdan style.widthCSS atribut. Jika Anda tidak menetapkan atribut CSS, ukuran intrinsik kanvas akan digunakan sebagai ukuran tampilan; jika Anda menetapkan atribut CSS, dan mereka berbeda dari dimensi kanvas, konten Anda akan diskalakan di browser. Sebagai contoh:

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

Lihat contoh langsung dari kanvas ini yang diperbesar dengan 4x.

Tampilkan cuplikan kode

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>

Luaskan cuplikan

— Phrogz
sumber

1

@Hazaart Jika Anda ingin mengaturnya secara berbeda: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});Jika Anda ingin ukuran visualnya sama dengan ukuran piksel, jangan pernah mengatur gayanya, hanya atributnya.

— Phrogz

1

"Jika Anda ingin ukuran visualnya sama dengan ukuran piksel, jangan pernah mengatur gaya, hanya atribut", apakah ada alasan untuk preferensi ini? Jika saya memiliki banyak objek di kanvas dan saya ingin memperbesar / memperkecil, akan jauh lebih cepat untuk hanya mereset css, bukan? (Daripada mengulang-ulang semua objek) ...

— EnglishAdam

3

@Gememorize: memperbesar melalui CSS membuatnya buram. Namun, Anda dapat memperbesar melalui penskalaan konteks dan terjemahan antara menggambar ulang alih-alih mengubah 'ukuran' setiap objek.

— Phrogz

1

Terima kasih banyak. Saya mengerti sekarang apa yang dilakukan CSS ... itu memperlakukan kanvas 'seperti' gambar, menskalakan gambar jelas tidak sebagus 'menggambar ulang' itu!

— EnglishAdam

3

Selain itu, Anda sekarang dapat melakukan "hapus zoom-in pixelated" alih-alih "zoom-in pixelated buram", setidaknya di Chrome, menggunakan gaya "rendering gambar: pixelated" di kanvas. Saya mengutak-atik biola Anda untuk menunjukkan perbedaan: jsfiddle.net/donhatch/9bheb/1663

— Don Hatch

62

Kanvas memiliki 2 ukuran, dimensi piksel di kanvas (itu backingstore atau drawingBuffer) dan ukuran tampilan. Jumlah piksel diatur menggunakan atribut kanvas. Dalam HTML

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

Atau dalam JavaScript

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

Terpisah dari itu adalah lebar dan tinggi gaya CSS kanvas

Dalam CSS

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

Atau dalam JavaScript

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

Cara terbaik untuk membuat kanvas 1x1 piksel adalah SELALU MENGGUNAKAN CSS untuk memilih ukuran kemudian menulis sedikit JavaScript untuk membuat jumlah piksel cocok dengan ukuran itu.

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

Mengapa ini cara terbaik? Karena itu berfungsi dalam banyak kasus tanpa harus mengubah kode apa pun.

Ini kanvas jendela penuh:

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Dan ini kanvas sebagai pelampung dalam paragraf

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Ini kanvas di panel kontrol yang cukup besar

Tampilkan cuplikan kode

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>

Luaskan cuplikan

inilah kanvas sebagai latar belakang

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Karena saya tidak mengatur atribut satu-satunya hal yang berubah dalam setiap sampel adalah CSS (sejauh menyangkut kanvas)

Catatan:

Jangan letakkan pembatas atau pelapis pada elemen kanvas. Menghitung ukuran untuk mengurangi jumlah dimensi elemen itu merepotkan

— gman
sumber

Jawaban terbaik, cuplikan ini harus menjadi metode kanvas DOM standar.

— rustypaper

23

Terima kasih banyak! Akhirnya saya memecahkan masalah piksel kabur dengan kode ini:

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

Dengan tambahan 'setengah-pixel' melakukan trik untuk menghapus garis-garis.

— pengguna1463699
sumber

26

@UpTheCreek Jika Anda menggambar garis di kanvas, itu terlihat lebih baik daripada seharusnya, seolah-olah itu kabur. Dengan meletakkan garis-garis pada setengah piksel (katakanlah, 50,5 bukannya 50) Anda mendapatkan garis yang bagus dan bersih. Ini sering dilakukan dengan menggunakan ctx.translate (0.5, 0.5) di awal kode Anda sehingga Anda dapat melupakannya setelah itu

— Johan

-2

Cara terbaik untuk melakukannya:

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

— rohan parab
sumber