Bagaimana untuk Mengubah Saiz Elemen Kanvas Secara Dinamik agar Sesuai dengan Dimensi Tetingkap Menggunakan JavaScript dan CSS?

Menggunakan JavaScript dan CSS untuk Melaraskan Saiz Kanvas Secara Dinamik kepada Dimensi Tetingkap

Apabila bekerja dengan elemen kanvas HTML5, mungkin sukar untuk menskala secara automatik dimensi mereka agar sesuai dengan ruang tingkap yang tersedia. Walaupun CSS boleh digunakan untuk menskalakan elemen HTML seperti div kepada 100%, ia tidak mempunyai kesan yang sama pada elemen kanvas.

Walau bagaimanapun, terdapat penyelesaian yang mudah dan cekap untuk masalah ini. Dengan memanfaatkan JavaScript dan CSS, kami boleh melaraskan saiz kanvas secara dinamik agar sepadan dengan dimensi tetingkap.

Pelaksanaan JavaScript:

Kod JavaScript melibatkan memanipulasi lebar kanvas dan sifat ketinggian berdasarkan saiz tetingkap semasa. Ini memastikan bahawa kanvas menyesuaikan diri dengan perubahan dalam saiz tetingkap tanpa memerlukan saiz semula manual.

<code class="javascript">function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}</code>

CSS untuk Responsif:

Untuk memastikan elemen kanvas memenuhi ruang yang tersedia dan diletakkan dengan betul, kami menggunakan CSS untuk mengkonfigurasi elemen html dan badan.

<code class="css">html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}</code>

Penyelesaian ini telah terbukti berkesan dalam mengekalkan responsif tanpa penurunan prestasi yang ketara. Ia dengan elegan mengendalikan saiz semula dan memastikan elemen kanvas sentiasa diposisikan secara optimum dalam tetingkap, menjadikannya mudah untuk mencipta aplikasi web yang dinamik dan adaptif.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Elemen Kanvas Secara Dinamik agar Sesuai dengan Dimensi Tetingkap Menggunakan JavaScript dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!