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>

Jawaban:


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.


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:

Dan ini kanvas sebagai pelampung dalam paragraf

Ini kanvas di panel kontrol yang cukup besar

inilah kanvas sebagai latar belakang

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

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.


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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.